react-router

问题 I have a page where I have button, if users click on that button I am going to redirect to other page say (page 2) using the below function: const viewChange = (record) => { let path = `newPath`; history.push('/ViewChangeRequest'); }; I want to pass some of the values to other page say record.id, record.name but could not be able to figure it out the way we can pass these to other page.. My other page is looks like below: const ViewChangeRequest = () => { ..... ...... ...... }; export default

问题 I have a page where I have button, if users click on that button I am going to redirect to other page say (page 2) using the below function: const viewChange = (record) => { let path = `newPath`; history.push('/ViewChangeRequest'); }; I want to pass some of the values to other page say record.id, record.name but could not be able to figure it out the way we can pass these to other page.. My other page is looks like below: const ViewChangeRequest = () => { ..... ...... ...... }; export default

问题 With react router I have done this up update the url: this.props.history.push({ pathname: `/product/${this.props.product.id}`, }); However this causes a re-render/navigation change. Is there a way to update the url without doing that? My use case is I have a list of products and when I click on one I show a Modal and want to update the url to something like example.com/product/1 so that the link is sharable. 回答1: Wasn't able to find a solution using React Router, but was able to accomplish

问题 On the server an API only path has been set under /api . When calling this path on the client-side, react-router takes over and responds with: browser.js:49 Warning: [react-router] Location "/api/my_request" did not match any routes How can we tell react-router to bypass this and just send the request out to the server? Update: This is how the request is being sent: const sock = new SockJS('http://localhost:3030/api') sock.onopen = () => { console.log('open') } sock.onmessage = (e) => {

问题 I am working on an application where I need to change the url of the page without causing a re-render. I am making a call to fetch all the pages inside componentDidMount like this componentDidMount() { axios.get('/pages') .then(response => { this.setState({ pages: response.data, slugs: response.data.pages.map(item => Slug(item.title)) }) }) Once I have all the pages then I want to show the individual pages. For eg. in the url it has to be like /page/1/slug-for-page-1 and /page/2/slug-for-page

问题 I'm having trouble figuring out what's wrong when I'm trying to scroll to a "ref". I've been searching like mad and found urls which make complete sense, but it won't work in my scenario. https://github.com/yannickcr/eslint-plugin-react/issues/678 http://codepen.io/takatama/pen/mVvbqx I have an app using react 15.4.2 along with react-router 3.0.0. I have a route to a component that takes an optional route parameter and am trying to use that to scroll to the element on componentDidUpdate(). I

问题 I'm having trouble figuring out what's wrong when I'm trying to scroll to a "ref". I've been searching like mad and found urls which make complete sense, but it won't work in my scenario. https://github.com/yannickcr/eslint-plugin-react/issues/678 http://codepen.io/takatama/pen/mVvbqx I have an app using react 15.4.2 along with react-router 3.0.0. I have a route to a component that takes an optional route parameter and am trying to use that to scroll to the element on componentDidUpdate(). I

问题 In my current React + React-router setup my component imports some jQuery things (owl.carousel and magnific popup) I want to keep the code clean, so the external features are stored in separate file. The code below works only when the page is loaded with direct URL and doesn't work when navigating back and forwards the app. So everything inside $(document).ready is triggered only with direct link. import '../jQuery/carousel.js'; $(document).ready(function(){ $('.owl-carousel').owlCarousel({ }

问题 In my current React + React-router setup my component imports some jQuery things (owl.carousel and magnific popup) I want to keep the code clean, so the external features are stored in separate file. The code below works only when the page is loaded with direct URL and doesn't work when navigating back and forwards the app. So everything inside $(document).ready is triggered only with direct link. import '../jQuery/carousel.js'; $(document).ready(function(){ $('.owl-carousel').owlCarousel({ }

问题 I am relatively new to react and attempting to create an app that has 2 designs. One is the public site that has a common header and footer and the internal app which has an admin header and side bar. I created a Router and 2 main routes '/' and '/app'. I then added subroutes hoping that if the parent routers were matched, it would show the parent component and pass the sub route's component as the this.props.children. I seemed to have done it wrong. Here is what I created. App.js: ... class