react-router-v4

问题 When an action for navigating to a route is triggered, an action triggers a new state where the router.location.pathname changes according to the browser's history . Another property changes as well: router.location.key , to a new random string. Even when the pathname itself doesn't change (clicking on a link to a page from the page itself), the key still updates. What's the purpose of the key property? In which situations would I want my own state to have a randomly generated key which

问题 When an action for navigating to a route is triggered, an action triggers a new state where the router.location.pathname changes according to the browser's history . Another property changes as well: router.location.key , to a new random string. Even when the pathname itself doesn't change (clicking on a link to a page from the page itself), the key still updates. What's the purpose of the key property? In which situations would I want my own state to have a randomly generated key which

问题 I'm using react-router to set up my application, and try to use <Redirect/> to set router for authentication. Route component have two different components, one is private Route , another is public route . Expect result : when auth is false, the page should jump back to a public page, which I set <Redirect to={"/public"} /> so far it seems route works fine, but redirect doesn't work properly. Any ideas are welcome! Thanks!! PrivateRoute interface PrivateRouteProps { isLogin: boolean;

问题 I have issues with component being displayed on every single path because React Router 4 isn't using exact for that route (or so it appears). <Route path="/" exact component={Explore} /> <Route path="/about" component={About} /> // The one making problems <Route path="/:username" exact={true} render={props => <Profile {...props} />} /> So when I go to http://example.com/about, my Profile component is still being rendered. I guess the problem is in the route as it expects param :username and

问题 I'm currently trying to unit test a function in a React Class Component. I've tried everything that I can come across to get access to the actual Component. The application is currently setup as follows: <IntlProvider ...> <BrowserRouter> <App/> </BrowserRouter> </IntlProvider> The Component I'd like to test, lets call it Users, is defined inside of as: <Route path="/users" render={(routeProps) => { return ( <Users {...routeProps} /> ); }} /> The users component is as such: type Props = {...}

问题 I have a app which has the Following Components |__Base - /home/Base |__Try - /home/Base/:try |__Report - /home/Base/:try/report Base is the Starting screen where the user hits a button and clicks on Try and after trying some things he hits submits which generates reports which has some back end interactions and when the data is fetched it loads the Reports. So what i want is when the user hits the back button from the Reports Page he should not land on the Try page but on the Base page . For

问题 I have a login form which on click calls the following function. Which summarizing , gets a response from the api, if valid, sets a cookie, and then redirects using the this.props.history.push() handleSubmit(event) { event.preventDefault(); const { email, password } = this.state; axios({ method: 'post', url: 'http://localhost:3003/login', data: qs.stringify({ email, password }), headers: { 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' } }).then(res => { console.log("set

问题 This question already has answers here : React router changes url but not view (22 answers) Closed 2 years ago . I a few <Link/> elements and a few corresponding components that are rendered via the <Route/> The components that are being rendered by <Route/> are redux connect -ed. On clicking the links,the url in the address bar changes but not the rendered component view. However,the proper view is rendered on refreshing. Code for the container component(the one with the Routers and Links)

问题 I am new to React learning , and was trying to build an app using react-router-dom. I was able to implement basic routing when I came across the term 'switch'. Can anyone please explain me with a use-case example where we use switch and what is its use? 回答1: Since you are new am going to take a bit more time to explain with examples and also add some few things about it you may want to have handy. So like Iddler said, Switch is more or less like the "Switch case" condition in any other

问题 I have a router like this: <Route path="/blog/:date/:folder" render={(props: any) => <Home /> It works with this: http://localhost/blog/2017-05-20/test However, :folder can have slashes (sub-dir) and i want to parse all path at once in folder. This is not working: http://localhost/blog/2017-05-20/test/sub/dir In this situation, I only get test . I want to get :folder as test/sub/dir as a whole. Is there any way to achieve this with React Router? Expected : :date => '2017-05-20' :folder =>