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

ฉันใช้ส่วนประกอบเดียวกันสำหรับเส้นทางที่แตกต่างกันสามเส้นทาง: <Router> <Route path="/home" component={Home} /> <Route path="/users" component={Home} /> <Route path="/widgets" component={Home} /> </Router> มีการรวมเข้าด้วยกันหรือไม่เพื่อให้เป็นดังนี้: <Router> <Route path=["/home", "/users", "/widgets"] component={Home} /> </Router>

116 javascript  reactjs  path  react-router  url-routing 

บางครั้ง ฉันเคยเห็นคนห่อส่วนประกอบของพวกเขาwithRouterเมื่อพวกเขาส่งออก: import { withRouter } from 'react-router-dom'; class Foo extends React.Component { // ... } export default withRouter(Foo); สิ่งนี้มีไว้เพื่ออะไรและควรใช้เมื่อใด

116 reactjs  react-router 

ฉันยังใหม่กับ React Router และเรียนรู้ว่ามีหลายวิธีในการเปลี่ยนเส้นทางเพจ: การใช้ browserHistory.push("/path") import { browserHistory } from 'react-router'; //do something... browserHistory.push("/path"); การใช้ this.context.router.push("/path") class Foo extends React.Component { constructor(props, context) { super(props, context); //do something... } redirect() { this.context.router.push("/path") } } Foo.contextTypes = { router: React.PropTypes.object } ใน React Router v4 มีthis.context.history.push("/path")และthis.props.history.push("/path"). รายละเอียด: จะพุชไปที่ History ใน …

116 reactjs  redux  react-router 

ฉันใช้ react และ react-router สำหรับแอปพลิเคชันของฉันทางฝั่งไคลเอ็นต์ ฉันไม่สามารถหาวิธีรับพารามิเตอร์การค้นหาต่อไปนี้จาก url เช่น: http://xmen.database/search#/?status=APPROVED&page=1&limit=20 เส้นทางของฉันมีลักษณะเช่นนี้ (ฉันรู้เส้นทางผิดโดยสิ้นเชิง): var routes = ( <Route> <DefaultRoute handler={SearchDisplay}/> <Route name="search" path="?status=:status&page=:page&limit=:limit" handler={SearchDisplay}/> <Route name="xmen" path="candidate/:accountId" handler={XmenDisplay}/> </Route> ); เส้นทางของฉันใช้งานได้ดี แต่ฉันไม่แน่ใจว่าจะจัดรูปแบบเส้นทางเพื่อให้ได้พารามิเตอร์ที่ฉันต้องการอย่างไร ขอบคุณความช่วยเหลือใด ๆ เกี่ยวกับเรื่องนี้!

112 javascript  reactjs  client-side  react-router  client-side-scripting 

ฉันคิดและสับสนกับการกำหนดเส้นทางระหว่างไคลเอนต์และเซิร์ฟเวอร์ สมมติว่าฉันใช้ ReactJS สำหรับการแสดงผลฝั่งเซิร์ฟเวอร์ก่อนที่จะส่งคำขอกลับไปที่เว็บเบราว์เซอร์และใช้ react-router เป็นเส้นทางฝั่งไคลเอ็นต์เพื่อสลับระหว่างเพจโดยไม่ต้องรีเฟรชเป็น SPA สิ่งที่อยู่ในใจคือ: เส้นทางตีความอย่างไร? ตัวอย่างเช่นคำขอจากหน้าแรก ( /home) ไปยังหน้าโพสต์ ( /posts) การกำหนดเส้นทางไปที่ใดบนฝั่งเซิร์ฟเวอร์หรือไคลเอนต์ มันรู้ได้อย่างไรว่ามันถูกประมวลผลอย่างไร?

108 javascript  reactjs  routes  react-router  url-routing 

ฉันมีปัญหาเล็กน้อยในการย้ายจาก React-Router v3 ไปเป็น v4 ใน v3 ฉันสามารถทำได้ทุกที่: import { browserHistory } from 'react-router'; browserHistory.push('/some/path'); ฉันจะบรรลุสิ่งนี้ใน v4.1 ได้อย่างไร ฉันรู้ว่าฉันสามารถใช้, hoc withRouter, react context หรือ event router props เมื่อคุณอยู่ใน Component แต่มันไม่ใช่กรณีสำหรับฉัน ฉันกำลังมองหาความเทียบเท่าของNavigatingOutsideOfComponentsใน v4

106 reactjs  react-router 

ฉันกำลังทำงานกับแอปพลิเคชันตอบกลับโดยใช้ react-router ฉันมีหน้าโครงการที่มี url ดังนี้: myapplication.com/project/unique-project-id เมื่อคอมโพเนนต์ของโปรเจ็กต์โหลดฉันจะทริกเกอร์การร้องขอข้อมูลสำหรับโปรเจ็กต์นั้นจากเหตุการณ์ componentDidMount ตอนนี้ฉันพบปัญหาที่ถ้าฉันสลับระหว่างสองโครงการโดยตรงดังนั้น id เท่านั้นที่เปลี่ยนไปเช่นนี้ ... myapplication.com/project/982378632 myapplication.com/project/782387223 myapplication.com/project/198731289 componentDidMount ไม่ถูกทริกเกอร์อีกดังนั้นข้อมูลจึงไม่ถูกรีเฟรช มีเหตุการณ์วงจรชีวิตอื่นที่ฉันควรใช้เพื่อเรียกใช้คำขอข้อมูลของฉันหรือใช้กลยุทธ์อื่นในการแก้ไขปัญหานี้หรือไม่

104 reactjs  react-router 

มีวิธีใดในการป้องกันไม่ให้/#/แสดงในแถบที่อยู่ของเบราว์เซอร์เมื่อใช้ react-router? นั่นคือด้วย ReactJS เช่นการคลิกลิงก์ที่จะไปแสดงให้เห็นเส้นทางใหม่หรือlocalhost:3000/#/ localhost:3000/#/aboutขึ้นอยู่กับเส้นทาง

103 reactjs  react-router 

ฉันไม่เข้าใจว่าจุดประสงค์ของการใช้นั้นIndexRouteและIndexLink ดูเหมือนว่าในกรณีใด ๆ รหัสด้านล่างจะเลือกส่วนประกอบ Home ก่อนเว้นแต่จะเปิดใช้งานเส้นทาง About <Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="about" component={About}/> </Route> เทียบกับ <Route path="/" component={App}> <Route path="home" component={Home}/> <Route path="about" component={About}/> </Route> ข้อดี / จุดประสงค์ของกรณีแรกคืออะไร?

102 javascript  reactjs  react-router  url-routing 

ฉันมีสิ่งต่อไปนี้: <Route name="app" path="/" handler={App}> <Route name="dashboards" path="dashboards" handler={Dashboard}> <Route name="exploreDashboard" path="exploreDashboard" handler={ExploreDashboard} /> <Route name="searchDashboard" path="searchDashboard" handler={SearchDashboard} /> <DefaultRoute handler={DashboardExplain} /> </Route> <DefaultRoute handler={SearchDashboard} /> </Route> เมื่อใช้ DefaultRoute SearchDashboard จะแสดงผลไม่ถูกต้องเนื่องจากแดชบอร์ด * ใด ๆ จำเป็นต้องแสดงผลภายในแดชบอร์ด ฉันต้องการให้ DefaultRoute ของฉันภายใน "แอป" เส้นทางชี้ไปที่เส้นทาง "searchDashboard" นี่คือสิ่งที่ฉันสามารถทำได้ด้วย React Router หรือฉันควรใช้ Javascript ปกติ (สำหรับการเปลี่ยนเส้นทางหน้า) สำหรับสิ่งนี้ โดยทั่วไปหากผู้ใช้ไปที่โฮมเพจฉันต้องการส่งไปที่แดชบอร์ดการค้นหาแทน …

100 javascript  routes  reactjs  url-redirection  react-router 

ฉันยังใหม่กับ ReactJs นี่คือรหัสของฉัน: var React = require('react'); var ReactDOM = require('react-dom'); var {Route, Router, IndexRoute, hashHistory} = require('react-router'); var Main = require('Main'); ReactDOM.render( <Router history={hashHistory}> <Route path="/" component={Main}></Route> </Router>, document.getElementById('app')); และรวบรวมด้วย webpack นอกจากนี้ฉันยังเพิ่มองค์ประกอบหลักในนามแฝงของฉัน คอนโซลแสดงข้อผิดพลาดเหล่านี้: ฉันอ่านลิงก์เหล่านี้ด้วย: React Router ล้มเหลว prop 'history' ไม่ได้กำหนด ฉันจะแก้ไขประวัติต้องทำเครื่องหมายอย่างไรเมื่อไม่ได้กำหนดค่า การอัปเกรด React-Router และการแทนที่ hashHistory ด้วย browserHistory และการค้นหามากมายในเว็บ แต่ฉันไม่สามารถแก้ไขปัญหานี้ได้ …

97 reactjs  react-router 

นอกเหนือจากความสามารถในการตั้งค่า "activeClassName" และ "activeStyle" บน NavLink แล้วมีเหตุผลใดบ้างที่จะใช้NavLinkผ่านลิงก์เมื่อสร้างลิงก์ไปยังเส้นทางอื่น ๆ บนองค์ประกอบที่ไม่ใช่การนำทาง (เช่นไม่ใช่การนำทางหลักในส่วนหัวหรือส่วนท้าย) บนไซต์ของคุณ ที่ไม่ต้องการสถานะ / คลาสที่ใช้งานอยู่?

95 reactjs  react-router  react-router-v4 

ฉันมีปัญหากับเราเตอร์ react (ฉันใช้เวอร์ชัน ^ 4.0.0) นี่คือ index.js ของฉัน import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import './index.css'; import { Router, Route, Link, browserHistory } from 'react-router'; ReactDOM.render( <Router history={browserHistory} > <Route path="/" component={App} /> </Router>, document.getElementById('root') ); App.js เป็นอะไรก็ได้ ฉันกำลังโพสต์สิ่งพื้นฐานที่นี่เพราะมันไม่ใช่ปัญหา (ฉันเชื่อว่า) import React, { Component …

92 javascript  json  reactjs  react-router 

ฉันใช้ react-router-dom 4.0.0-beta.6 ในโครงการของฉัน ฉันมีรหัสดังต่อไปนี้: <Route exact path="/home" component={HomePage}/> และฉันต้องการรับพารามิเตอร์แบบสอบถามในHomePageองค์ประกอบ ฉันพบlocation.searchพารามิเตอร์ที่มีลักษณะเช่นนี้?key=valueดังนั้นจึงไม่มีการแยกวิเคราะห์ วิธีที่ถูกต้องในการรับพารามิเตอร์แบบสอบถามด้วย react-router v4 คืออะไร?

91 react-router  react-router-v4  react-router-dom 

ฉันต้องใช้ตรรกะทางธุรกิจบางอย่างขึ้นอยู่กับประวัติการเข้าชม สิ่งที่ฉันต้องการทำมีดังนี้: reactRouter.onUrlChange(url => { this.history.push(url); }); มีวิธีใดบ้างในการรับการติดต่อกลับจาก react-router เมื่อ URL ได้รับการอัปเดต

91 reactjs  react-router  react-router-v4  react-router-redux  react-router-dom