คำถามติดแท็ก react-router

พิจารณาสิ่งต่อไปนี้: var AppRoutes = [ <Route handler={App} someProp="defaultProp"> <Route path="/" handler={Page} /> </Route>, <Route handler={App} someProp="defaultProp"> <Route path="/" handler={Header} > <Route path="/withheader" handler={Page} /> </Route> </Route>, <Route handler={App} someProp="defaultProp"> <Route path=":area" handler={Area} /> <Route path=":area/:city" handler={Area} /> <Route path=":area/:city/:locale" handler={Area} /> <Route path=":area/:city/:locale/:type" handler={Area} /> </Route> ]; ฉันมีแม่แบบแอปส่วนหัวและชุดเส้นทางที่กำหนดพารามิเตอร์ด้วยตัวจัดการเดียวกัน (ภายในเทมเพลตแอป) ฉันต้องการให้บริการ …

132 react-router 

ฉันใช้โมดูล react-router เวอร์ชันล่าสุดชื่อ react-router-dom ซึ่งกลายเป็นค่าเริ่มต้นเมื่อพัฒนาเว็บแอปพลิเคชันด้วย React ฉันต้องการทราบวิธีการเปลี่ยนเส้นทางหลังจากคำขอ POST ฉันกำลังสร้างรหัสนี้ แต่หลังจากขอแล้วก็ไม่มีอะไรเกิดขึ้น ฉันตรวจสอบบนเว็บ แต่ข้อมูลทั้งหมดเกี่ยวกับเราเตอร์การตอบสนองเวอร์ชันก่อนหน้าและไม่มีในการอัปเดตครั้งล่าสุด รหัส: import React, { PropTypes } from 'react'; import ReactDOM from 'react-dom'; import { BrowserRouter } from 'react-router-dom'; import { Redirect } from 'react-router' import SignUpForm from '../../register/components/SignUpForm'; import styles from './PagesStyles.css'; import axios from 'axios'; import Footer …

132 javascript  reactjs  react-router 

ฉันกำลังพยายามเพิ่มองค์ประกอบ React map ในโปรเจ็กต์ของฉัน แต่พบข้อผิดพลาด ฉันใช้บล็อกโพสต์ของ Fullstack React เป็นข้อมูลอ้างอิง ฉันติดตามว่าข้อผิดพลาดเกิดขึ้นที่ไหนใน google_map.js บรรทัด 83: function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } นี่คือส่วนประกอบแผนที่ของฉันจนถึงตอนนี้ หน้าเว็บโหลดได้ดี (ไม่มีแผนที่) เมื่อฉันแสดงความคิดเห็นบรรทัดที่ 58-60 สามบรรทัดสุดท้าย แก้ไข: ฉันได้ทำการเปลี่ยนแปลงที่ @Dmitriy Nevzorov แนะนำและยังคงให้ข้อผิดพลาดเดิม import React from 'react' import GoogleApiComponent …

132 javascript  google-maps  reactjs  ecmascript-6  react-router 

ฉันยังใหม่กับ ReactJS และ React-Router ฉันมีส่วนประกอบที่ได้รับผ่านอุปกรณ์ประกอบฉากเป็น<Link/>วัตถุจากตอบสนองเราเตอร์ เมื่อใดก็ตามที่ผู้ใช้คลิกปุ่ม 'ถัดไป' ในส่วนประกอบนี้ฉันต้องการเรียกใช้<Link/>วัตถุด้วยตนเอง ตอนนี้ฉันใช้refsเพื่อเข้าถึงอินสแตนซ์สำรองและคลิกที่แท็ก 'a' ที่<Link/>สร้างขึ้นด้วยตนเอง คำถาม:มีวิธีเรียกใช้ Link (เช่นthis.props.next.go) ด้วยตนเองหรือไม่? นี่คือรหัสปัจจุบันที่ฉันมี: //in MasterPage.js var sampleLink = <Link to="/sample">Go To Sample</Link> <Document next={sampleLink} /> //in Document.js ... var Document = React.createClass({ _onClickNext: function() { var next = this.refs.next.getDOMNode(); next.querySelectorAll('a').item(0).click(); //this sounds like hack to me }, …

131 javascript  reactjs  react-router 

เนื่องจากฉันใช้ react-router เพื่อจัดการเส้นทางของฉันในแอป react ฉันจึงสงสัยว่ามีวิธีเปลี่ยนเส้นทางไปยังทรัพยากรภายนอกหรือไม่ พูดว่ามีคนฮิต: example.com/privacy-policy ฉันต้องการให้เปลี่ยนเส้นทางไปที่: example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies ฉันพบว่าไม่มีความช่วยเหลือในการหลีกเลี่ยงการเขียนเป็น JS ธรรมดาที่การโหลด index.html ของฉันด้วยสิ่งที่ต้องการ: if ( window.location.path === "privacy-policy" ){ window.location = "example.zendesk.com/hc/en-us/articles/123456789-Privacy-Policies" }

125 javascript  reactjs  redirect  react-router  react-router-redux 

ใครช่วยบอกหน่อยได้ไหมว่าฉันจะกลับไปที่หน้าที่แล้วแทนที่จะเป็นเส้นทางที่เจาะจงได้อย่างไร เมื่อใช้รหัสนี้: var BackButton = React.createClass({ mixins: [Router.Navigation], render: function() { return ( <button className="button icon-left" onClick={this.navigateBack}> Back </button> ); }, navigateBack: function(){ this.goBack(); } }); รับข้อผิดพลาดนี้goBack () ถูกละเว้นเนื่องจากไม่มีประวัติเราเตอร์ นี่คือเส้นทางของฉัน: // Routing Components Route = Router.Route; RouteHandler = Router.RouteHandler; DefaultRoute = Router.DefaultRoute; var routes = ( <Route name="app" path="/" handler={OurSchoolsApp}> …

124 javascript  reactjs  react-router 

ทั้งสองมีเส้นทางเชื่อมโยง ฯลฯ เมื่อใดควรใช้อย่างใดอย่างหนึ่ง ฉันสับสนจริงๆว่าจะใช้แต่ละอันได้ที่ไหน ฝั่งเซิร์ฟเวอร์? ด้านลูกค้า? https://reacttraining.com/react-router/ ในบางตัวอย่างคุณต้องส่งประวัติ แต่อย่างอื่นไม่ได้ จะทำอย่างไร? <Router history={browserHistory}> VS <Router> มันสับสนจริงๆว่าเมื่อใดควรใช้อย่างใดอย่างหนึ่งความช่วยเหลือใด ๆ ที่ชื่นชม

124 reactjs  react-router 

ฉันพยายามใช้เส้นทางที่ตรวจสอบสิทธิ์ แต่พบว่าตอนนี้ React Router 4 ป้องกันไม่ให้สิ่งนี้ทำงาน: <Route exact path="/" component={Index} /> <Route path="/auth" component={UnauthenticatedWrapper}> <Route path="/auth/login" component={LoginBotBot} /> </Route> <Route path="/domains" component={AuthenticatedWrapper}> <Route exact path="/domains" component={DomainsIndex} /> </Route> ข้อผิดพลาดคือ: คำเตือน: คุณไม่ควรใช้<Route component>และ<Route children>อยู่ในเส้นทางเดียวกัน <Route children>จะถูกละเว้น ในกรณีนี้วิธีที่ถูกต้องในการนำไปใช้คืออะไร? ปรากฏในreact-routerเอกสาร (v4) ซึ่งแนะนำสิ่งต่างๆเช่น <Router> <div> <AuthButton/> <ul> <li><Link to="/public">Public Page</Link></li> <li><Link to="/protected">Protected Page</Link></li> </ul> …

122 javascript  reactjs  react-router  react-router-v4 

ฉันมีสิ่งต่อไปนี้: ฉันจะกำจัดขีดเส้นใต้สีน้ำเงินได้อย่างไร รหัสอยู่ด้านล่าง: <Link to="first"><MenuItem style={{paddingLeft: 13, textDecoration: 'none'}}> Team 1 </MenuItem></Link> ส่วนประกอบ MenuItem มาจากhttp://www.material-ui.com/#/components/menu ข้อมูลเชิงลึกหรือคำแนะนำใด ๆ จะได้รับการชื่นชมอย่างมาก ขอบคุณล่วงหน้า.

121 javascript  reactjs  react-router 

พยายามรับ react-router (v4.0.0) และ react-hot-loader (3.0.0-beta.6) เพื่อให้เล่นได้ดี แต่ได้รับข้อผิดพลาดต่อไปนี้ในคอนโซลเบราว์เซอร์: คำเตือน: React.createElement: type is invalid - คาดว่าจะเป็นสตริง (สำหรับคอมโพเนนต์ในตัว) หรือคลาส / ฟังก์ชัน (สำหรับคอมโพสิตคอมโพสิต) แต่ได้รับ: ไม่ได้กำหนด คุณอาจลืมส่งออกส่วนประกอบของคุณจากไฟล์ที่กำหนดไว้ ดัชนี js: import React from 'react'; import ReactDom from 'react-dom'; import routes from './routes.js'; require('jquery'); import 'bootstrap/dist/css/bootstrap.min.css'; import 'bootstrap/dist/js/bootstrap.min.js'; import './css/main.css'; const renderApp = (appRoutes) => { …

121 reactjs  react-router  react-hot-loader 

ฉันต้องการให้แอป ReactJS ของฉันแจ้งเตือนผู้ใช้เมื่อออกจากหน้าใดหน้าหนึ่ง โดยเฉพาะข้อความป๊อปอัปที่เตือนให้เขา / เธอดำเนินการ: "บันทึกการเปลี่ยนแปลงแล้ว แต่ยังไม่เผยแพร่ทำตอนนี้เลยไหม" ฉันควรทริกเกอร์สิ่งนี้ในreact-routerทั่วโลกหรือนี่คือสิ่งที่สามารถทำได้จากภายในหน้าปฏิกิริยา / ส่วนประกอบ? ฉันไม่พบอะไรเลยในตอนหลังและฉันควรหลีกเลี่ยงสิ่งแรก เว้นแต่จะเป็นบรรทัดฐาน แต่นั่นทำให้ฉันสงสัยว่าจะทำสิ่งนั้นได้อย่างไรโดยไม่ต้องเพิ่มโค้ดในทุกหน้าที่เป็นไปได้ที่ผู้ใช้สามารถไปที่ .. ยินดีต้อนรับข้อมูลเชิงลึกใด ๆ ขอบคุณ!

120 reactjs  react-router 

ฉันไม่สามารถดูเหมือนจะหาวิธีการปรับปรุง params <Link/>แบบสอบถามที่มีการตอบสนองเราเตอร์โดยไม่ต้องใช้ hashHistory.push(url)ดูเหมือนจะไม่ลงทะเบียนพารามิเตอร์การสืบค้นและดูเหมือนว่าคุณไม่สามารถส่งผ่านวัตถุแบบสอบถามหรืออะไรก็ได้เป็นอาร์กิวเมนต์ที่สอง คุณจะเปลี่ยน url จาก/shop/Clothes/dressesเป็น/shop/Clothes/dresses?color=blueใน react-router โดย<Link>ไม่ใช้ได้อย่างไร? และonChangeฟังก์ชั่นเป็นวิธีเดียวที่จะรับฟังการเปลี่ยนแปลงคำค้นหาหรือไม่ เหตุใดจึงไม่ตรวจพบการเปลี่ยนแปลงการค้นหาโดยอัตโนมัติและตอบสนองต่อวิธีการเปลี่ยนแปลงพารามิเตอร์

119 reactjs  react-router 

ฉันกำลังเปลี่ยนแอปตอบกลับจาก webpack-dev-server เป็น nginx เมื่อฉันไปที่ root url "localhost: 8080 / login" ฉันได้รับ 404 และในบันทึก nginx ของฉันฉันเห็นว่ามันพยายามรับ: my-nginx-container | 2017/05/12 21:07:01 [error] 6#6: *11 open() "/wwwroot/login" failed (2: No such file or directory), client: 172.20.0.1, server: , request: "GET /login HTTP/1.1", host: "localhost:8080" my-nginx-container | 172.20.0.1 - - [12/May/2017:21:07:01 +0000] "GET …

118 nginx  react-router 

ฉันกำลังสร้างแอปที่ใช้ webpack-dev-server ในการพัฒนาควบคู่ไปกับ react-router ดูเหมือนว่า webpack-dev-server ถูกสร้างขึ้นจากสมมติฐานที่ว่าคุณจะมีจุดเข้าสาธารณะในที่เดียว (เช่น "/") ในขณะที่ react-router อนุญาตให้มีจุดเข้าได้ไม่ จำกัด จำนวน ฉันต้องการประโยชน์ของ webpack-dev-server โดยเฉพาะอย่างยิ่งคุณสมบัติการรีโหลดใหม่ที่ยอดเยี่ยมสำหรับการทำงาน แต่ฉันยังต้องการโหลดเส้นทางที่ตั้งไว้ใน react-router เราจะนำมันไปใช้งานร่วมกันได้อย่างไร? คุณสามารถเรียกใช้เซิร์ฟเวอร์ด่วนที่ด้านหน้าของ webpack-dev-server เพื่ออนุญาตสิ่งนี้ได้หรือไม่?

117 javascript  reactjs  webpack  react-router 

ฉันใช้ webpack และ HtmlWebpackPlugin เพื่อฉีด js และ css ที่รวมไว้ในไฟล์เทมเพลต html new HtmlWebpackPlugin({ template: 'client/index.tpl.html', inject: 'body', filename: 'index.html' }), และสร้างไฟล์ html ต่อไปนี้ <!doctype html> <html lang="en"> <head> ... <link href="main-295c5189923694ec44ac.min.css" rel="stylesheet"> </head> <body> <div id="app"></div> <script src="main-295c5189923694ec44ac.min.js"></script> </body> </html> วิธีนี้ใช้งานได้ดีเมื่อไปที่รูทของแอปlocalhost:3000/แต่ล้มเหลวเมื่อฉันพยายามเยี่ยมชมแอปจาก URL อื่นเช่นlocalhost:3000/items/1เนื่องจากไฟล์ที่รวมไม่ได้ถูกแทรกด้วยพา ธ สัมบูรณ์ เมื่อโหลดไฟล์ html ไฟล์จะค้นหาไฟล์ js ภายใน/itemsไดเร็กทอรีที่ไม่มีอยู่จริงเนื่องจาก react-router …

116 javascript  express  webpack  react-router