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

ใน React Router (v3) รุ่นปัจจุบันฉันสามารถยอมรับการตอบกลับของเซิร์ฟเวอร์และใช้browserHistory.pushเพื่อไปที่หน้าการตอบสนองที่เหมาะสม อย่างไรก็ตามนี่ไม่สามารถใช้ได้ใน v4 และฉันไม่แน่ใจว่าวิธีการที่เหมาะสมในการจัดการนี้คืออะไร ในตัวอย่างนี้ใช้ Redux, ส่วนประกอบ / การตรวจสอบผลิตภัณฑ์ form.jsโทรthis.props.addProduct(props)เมื่อผู้ใช้ส่งแบบฟอร์ม เมื่อเซิร์ฟเวอร์กลับสู่ความสำเร็จผู้ใช้จะถูกนำไปที่หน้ารถเข็น // actions/index.js export function addProduct(props) { return dispatch => axios.post(`${ROOT_URL}/cart`, props, config) .then(response => { dispatch({ type: types.AUTH_USER }); localStorage.setItem('token', response.data.token); browserHistory.push('/cart'); // no longer in React Router V4 }); } ฉันจะเปลี่ยนเส้นทางไปยังหน้ารถเข็นจากฟังก์ชั่นสำหรับ React Router v4 …

360 reactjs  react-router  react-router-v4 

ฉันเพิ่งเปลี่ยนreact-routerจาก v3 เป็น v4 แต่ผมไม่แน่ใจว่าจะเลื่อนโปรแกรมในฟังก์ชั่นสมาชิกของ Componentนั่นคือในhandleClick()ฟังก์ชั่นที่ฉันต้องการนำทาง/path/some/whereหลังจากประมวลผลข้อมูล ฉันเคยทำโดย: import { browserHistory } from 'react-router' browserHistory.push('/path/some/where') แต่ฉันไม่พบอินเทอร์เฟซดังกล่าวใน v4 ฉันจะนำทางโดยใช้ v4 ได้อย่างไร

336 reactjs  ecmascript-6  react-router-v4 

ฉันต้องการประกาศพา ธ ด้วยพารามิเตอร์พา ธ เผื่อเลือกดังนั้นเมื่อฉันเพิ่มเพจเพื่อทำสิ่งพิเศษ (เช่นกรอกข้อมูลบางส่วน): http: // localhost / app / path / to / page <= แสดงหน้า http: // localhost / app / เส้นทาง / ไปยัง / หน้า / pathParam <= แสดงหน้าด้วยข้อมูลบางส่วนตาม pathParam ในเราเตอร์ที่ตอบสนองของฉันฉันมีเส้นทางต่อไปนี้เพื่อสนับสนุนสองตัวเลือก (นี่คือตัวอย่างที่ง่าย): <Router history={history}> <Route path="/path" component={IndexPage}> <Route path="to/page" component={MyPage}/> <Route path="to/page/:pathParam" component={MyPage}/> </Route> </Router> …

306 javascript  reactjs  react-router  react-router-v4 

ฉันกำลังดิ้นรนกับเส้นทางการทำรังโดยใช้ react router v4 ตัวอย่างที่ใกล้เคียงที่สุดคือการตั้งค่าเส้นทางใน เอกสารตอบสนอง-Router v4 ฉันต้องการแยกแอปออกเป็นสองส่วน ส่วนหน้าและพื้นที่ของผู้ดูแลระบบ ฉันกำลังคิดเกี่ยวกับสิ่งนี้: <Match pattern="/" component={Frontpage}> <Match pattern="/home" component={HomePage} /> <Match pattern="/about" component={AboutPage} /> </Match> <Match pattern="/admin" component={Backend}> <Match pattern="/home" component={Dashboard} /> <Match pattern="/users" component={UserPage} /> </Match> <Miss component={NotFoundPage} /> ส่วนหน้ามีเลย์เอาต์และสไตล์ที่แตกต่างจากพื้นที่ของผู้ดูแลระบบ ดังนั้นในหน้าแรกเส้นทางบ้านประมาณหนึ่งเส้นทางควรเป็นเส้นทางลูก / homeควรแสดงผลในองค์ประกอบ Frontpage และ/ admin / homeควรแสดงผลภายในองค์ประกอบ Backend ฉันลองใช้รูปแบบต่าง ๆ แต่ฉันมักจะจบลงด้วยการไม่กดปุ่ม …

261 javascript  reactjs  nested  react-router  react-router-v4 

ฉันต้องการที่จะแสดงtitleใน<AppBar />ที่อย่างใดผ่านมาจากเส้นทางปัจจุบัน ใน React Router v4 จะ<AppBar />สามารถรับเส้นทางปัจจุบันที่ส่งเข้าสู่titleเสาได้อย่างไร <Router basename='/app'> <main> <Menu active={menu} close={this.closeMenu} /> <Overlay active={menu} onClick={this.closeMenu} /> <AppBar handleMenuIcon={this.handleMenuIcon} title='Test' /> <Route path='/customers' component={Customers} /> </main> </Router> มีวิธีที่จะผ่านชื่อที่กำหนดเองจากที่กำหนดเองpropบน<Route />?

183 reactjs  react-router  react-router-v4 

ฉันมีปุ่มสองสามปุ่มที่ทำหน้าที่เป็นเส้นทาง ทุกครั้งที่เปลี่ยนเส้นทางฉันต้องการให้แน่ใจว่าปุ่มที่ใช้งานอยู่เปลี่ยนไป มีวิธีฟังการเปลี่ยนแปลงเส้นทางใน react router v4 หรือไม่?

149 react-router-v4 

ฉันพยายามใช้เส้นทางที่ตรวจสอบสิทธิ์ แต่พบว่าตอนนี้ 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 

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

95 reactjs  react-router  react-router-v4 

ฉันใช้ 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