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

ด้วยreact-routerฉันสามารถใช้Linkองค์ประกอบในการสร้างลิงค์ที่จัดการโดยกำเนิดเราเตอร์ ฉันเห็นการโทรthis.context.transitionTo(...)ภายใน ฉันต้องการนำทาง ไม่ใช่จากลิงก์ แต่มาจากตัวเลือกแบบเลื่อนลง (เป็นตัวอย่าง) ฉันจะทำสิ่งนี้ในรหัสได้อย่างไร คือthis.contextอะไร ผมเห็นNavigationmixin แต่ฉันสามารถทำเช่นนี้ไม่mixins?

1428 reactjs  react-router 

ฉันใช้ React-router และทำงานได้ดีในขณะที่ฉันคลิกที่ปุ่มลิงค์ แต่เมื่อฉันรีเฟรชหน้าเว็บของฉันมันไม่โหลดสิ่งที่ฉันต้องการ ตัวอย่างเช่นฉันอยู่localhost/joblistและทุกอย่างดีเพราะฉันมาถึงที่นี่กดลิงค์ แต่ถ้าฉันรีเฟรชหน้าเว็บฉันจะได้รับ: Cannot GET /joblist โดยค่าเริ่มต้นมันไม่ทำงานเช่นนี้ ตอนแรกผมมี URL ของฉันเป็นlocalhost/#/และlocalhost/#/joblistและพวกเขาทำงานอย่างสมบูรณ์ดี แต่ฉันไม่ชอบ URL ประเภทนี้ดังนั้นพยายามที่จะลบมัน#ฉันเขียน: Router.run(routes, Router.HistoryLocation, function (Handler) { React.render(<Handler/>, document.body); }); ปัญหานี้ไม่ได้เกิดขึ้นlocalhost/สิ่งนี้กลับมาในสิ่งที่ฉันต้องการเสมอ แก้ไข:แอพนี้เป็นหน้าเดียวดังนั้น/joblistไม่จำเป็นต้องถามอะไรเลยกับเซิร์ฟเวอร์ใด ๆ EDIT2:เราเตอร์ทั้งหมดของฉัน var routes = ( <Route name="app" path="/" handler={App}> <Route name="joblist" path="/joblist" handler={JobList}/> <DefaultRoute handler={Dashboard}/> <NotFoundRoute handler={NotFound}/> </Route> ); Router.run(routes, Router.HistoryLocation, function (Handler) …

653 javascript  reactjs  url  react-router 

ฉันได้รับข้อผิดพลาดนี้: ข้อผิดพลาดที่ไม่คาดคิด: การละเมิดที่ไม่คงที่: ประเภทองค์ประกอบไม่ถูกต้อง: คาดว่าสตริง (สำหรับคอมโพเนนต์ในตัว) หรือคลาส / ฟังก์ชั่น (สำหรับส่วนประกอบคอมโพสิต) แต่ได้รับ: วัตถุ นี่คือรหัสของฉัน: var React = require('react') var ReactDOM = require('react-dom') var Router = require('react-router') var Route = Router.Route var Link = Router.Link var App = React.createClass({ render() { return ( <div> <h1>App</h1> <ul> <li><Link to="/about">About</Link></li> </ul> </div> ) } …

528 reactjs  react-router 

ฉันจะกำหนดเส้นทางในไฟล์ route.jsx ของฉันเพื่อจับ__firebase_request_keyค่าพารามิเตอร์จาก URL ที่สร้างโดยกระบวนการลงชื่อเพียงครั้งเดียวของ Twitter หลังจากที่เปลี่ยนเส้นทางจากเซิร์ฟเวอร์ได้อย่างไร http://localhost:8000/#/signin?_k=v9ifuf&__firebase_request_key=blablabla ฉันพยายามกำหนดค่าเส้นทางต่อไปนี้ แต่:redirectParamไม่พบพารามิเตอร์ที่กล่าวถึง: <Router> <Route path="/" component={Main}> <Route path="signin" component={SignIn}> <Route path=":redirectParam" component={TwitterSsoButton} /> </Route> </Route> </Router>

412 reactjs  react-router 

ใน 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.js ของฉันโดยใช้ React Router : var Dashboard = require('./Dashboard'); var Comments = require('./Comments'); var Index = React.createClass({ render: function () { return ( <div> <header>Some header</header> <RouteHandler /> </div> ); } }); var routes = ( <Route path="/" handler={Index}> <Route path="comments" handler={Comments}/> <DefaultRoute handler={Dashboard}/> </Route> ); ReactRouter.run(routes, function (Handler) …

315 javascript  properties  reactjs  react-router 

ฉันต้องการประกาศพา ธ ด้วยพารามิเตอร์พา ธ เผื่อเลือกดังนั้นเมื่อฉันเพิ่มเพจเพื่อทำสิ่งพิเศษ (เช่นกรอกข้อมูลบางส่วน): 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 

เราจะส่งพารามิเตอร์ด้วยthis.props.history.push('/page')ใน React-Router v4 ได้อย่างไร .then(response => { var r = this; if (response.status >= 200 && response.status < 300) { r.props.history.push('/template'); });

217 reactjs  react-router 

ฉันต้องการที่จะแสดง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 และ Redux เพื่อพัฒนา webapp และเมื่อฉันเริ่มโครงการฉันได้รับสิ่งนี้: Line 13: Unexpected use of 'location' no-restricted-globals Search for the keywords to learn more about each error. ฉันค้นหาวิธีแก้ปัญหาได้มากมาย แต่ไม่มีคำตอบที่ฉันพบเลยช่วยฉันเลยหันไปหา Stack overflow ไม่มีใครรู้วิธีแก้ไขข้อผิดพลาดนี้หรือไม่? ฉันขอขอบคุณทุกความช่วยเหลือที่ฉันสามารถได้รับ

168 javascript  reactjs  react-router  eslint 

บางคนสามารถอธิบายความแตกต่างระหว่าง <Route exact path="/" component={Home} /> และ <Route path="/" component={Home} /> ฉันไม่รู้ความหมายของ 'แน่นอน'

162 reactjs  react-router  react-router-dom 

ฉันใช้ react กับ react-router ฉันกำลังพยายามส่งคุณสมบัติใน "ลิงก์" ของ react-router var React = require('react'); var Router = require('react-router'); var CreateIdeaView = require('./components/createIdeaView.jsx'); var Link = Router.Link; var Route = Router.Route; var DefaultRoute = Router.DefaultRoute; var RouteHandler = Router.RouteHandler; var App = React.createClass({ render : function(){ return( <div> <Link to="ideas" params={{ testvalue: "hello" …

151 javascript  reactjs  react-router 

/arbitrary/routeตอบสนองเราเตอร์ช่วยให้ตอบสนองปพลิเคชันที่จะจับ เพื่อให้มันใช้งานได้ฉันต้องการเซิร์ฟเวอร์ของฉันเพื่อส่งแอป React ในทุกเส้นทางที่ตรงกัน แต่เซิร์ฟเวอร์ dev ของ webpackไม่จัดการจุดสิ้นสุดตามอำเภอใจ มีวิธีแก้ปัญหาที่นี่โดยใช้เซิร์ฟเวอร์ด่วนเพิ่มเติม วิธีการอนุญาตสำหรับ webpack-dev-server เพื่ออนุญาตจุดเข้าใช้งานจาก react-router แต่ฉันไม่ต้องการไฟเซิร์ฟเวอร์ด่วนอื่นให้อนุญาตการจับคู่เส้นทาง ฉันแค่อยากบอก webpack dev server ให้ตรงกับ url และส่งแอปตอบกลับของฉันมาให้ฉัน กรุณา.

148 reactjs  ecmascript-6  webpack  react-router 

ฉันมีปัญหาเมื่อไปที่หน้าอื่นตำแหน่งของมันจะยังคงเหมือนหน้าก่อน ดังนั้นจะไม่เลื่อนขึ้นไปด้านบนโดยอัตโนมัติ ฉันพยายามใช้window.scrollTo(0, 0)กับonChangeเราเตอร์ด้วย ฉันเคยscrollBehaviorแก้ไขปัญหานี้ด้วย แต่ไม่ได้ผล ข้อเสนอแนะเกี่ยวกับเรื่องนี้หรือไม่?

135 javascript  reactjs  react-router  react-router-redux