Ad
React Router Multiple Params Doesn't Work
I want from path="/users/:login/:repo"
to view login's repo detail page but it doesn't work and views UserProfile component.
Here is the click:
<Link to={this.props.location.pathname+'/'+item.name}>
<div>
<h4>{item.name}</h4>
<p>{item.description} </p>
</div>
</Link>
<Switch>
<Route exact path="/" component={Contributors}/>
<Route path="/users/:login" component={UserProfile}/>
<Route path="/users/:login/:repo" component={RepoPage}/>
</Switch>
Ad
Answer
You need to reverse the ordering of your routes, since Switch
matches the first route
<Switch>
<Route exact path="/" component={Contributors}/>
<Route path="/users/:login/:repo" component={RepoPage}/>
<Route path="/users/:login" component={UserProfile}/>
</Switch>
With React-router the paths that are prefixes to the exactly matching path are also matched and hence "/users/:login/:repo"
also matches "/users/:login"
, and since you are using switch, RepoPage is getting rendered and not other Routes defined after this are getting checked.
Ad
source: stackoverflow.com
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?
Ad