Using React IndexRoute in react-router v4
Solution 1
UPDATE
react-router-4
has changed in that it no longer has children. However, with the Route
component you can render anything that matches the path.
<Router>
<div>
<ul>
<li><Link to="/">Home</Link></li>
<li><Link to="/about">About</Link></li>
<li><Link to="/contact">Contact</Link></li>
</ul>
<hr/>
// All 3 components below would be rendered when in a homepage
<Route exact path="/" component={Home}/>
<Route exact path="/" component={About}/>
<Route exact path="/" component={Contact}/>
<Route path="/about" component={About}/>
<Route path="/contact" component={Contact}/>
</div>
</Router>
This means that if you want a wrapper, you can write it inside the component.
Solution 2
react-router & no IndexRoute
any more
<Route exact path="/" component={Home}/>
equal to <IndexRoute component={Home}/>
// Switch
<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>
import { Switch, Route } from 'react-router'
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>
</Switch>
/* there will only ever be one child here */
<Fade>
<Switch>
<Route/>
<Route/>
</Switch>
</Fade>
<Fade>
<Route/>
<Route/>
</Fade>
/* there will always be two children here, one might render null though, making transitions a bit more cumbersome to work out */
refs
https://github.com/ReactTraining/react-router/issues/4732#issuecomment-317239220
https://reacttraining.com/react-router/web/api/Switch
Quoc-Hao Tran
Updated on July 09, 2022Comments
-
Quoc-Hao Tran almost 2 years
I'm learning React myself with online tutorial.
So this is a basic example about using React Router:
<Router history={browserHistory}> <Route path="/" component={App}> <IndexRoute component={Home}/> <Route path="/home" component={Home}/> <Route path="/about" component={About}/> <Route path="/contact" component={Contact}/> </Route> </Router>
With my App component:
class App extends React.Component { render() { return ( <div> <ul> <li><Link to="home">Home</Link></li> <li><Link to="about">About</Link></li> <li><Link to="contact">Contact</Link></li> </ul> {this.props.children} </div> ) } } export default App;
However, I have problem when using IndexRoute because it shows nothing, so I search for the module of react-router-dom v4 on npm and there is no IndexRoute inside. Instead it uses this:
<Router> <div> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/contact">Contact</Link></li> </ul> <hr/> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> <Route path="/contact" component={Contact}/> </div> </Router>
So how can I render 2 component for 1 path ?
-
Quoc-Hao Tran about 7 yearsso if I dont specify the
path
property, it will always be rendered ? -
Quoc-Hao Tran about 7 yearsI tried your solution, but with that the 3 others component wouldn't be rendered.
-
The questioner about 7 yearsSo, no need the
<Route path="/" component={App}>
App container component then? -
Deividas Karzinauskas about 7 years@Thequestioner yes. You can simply add content you want or just wrap routes as you would wrap any other components.
-
CMCDragonkai almost 5 yearsI was hoping to use the IndexRoute and route wrappers to acquire the
location.search
string so I can create a context for query parameters. Now with react router v4 how do I do this? -
Ankit Tiwari about 3 yearsHello @DeividasKarzinauskas given link is dead or broken.