Using React IndexRoute in react-router v4

Question

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 ?

Deividas · Accepted Answer · 2021-05-08 13:12:19Z

75

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.

edited May 8, 2021 at 13:12

answered Mar 12, 2017 at 19:02

Deividas

6,5172 gold badges30 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Quoc-Hao Tran Over a year ago

so if I dont specify the path property, it will always be rendered ?

Quoc-Hao Tran Over a year ago

I tried your solution, but with that the 3 others component wouldn't be rendered.

The questioner Over a year ago

So, no need the <Route path="/" component={App}> App container component then?

Deividas Over a year ago

@Thequestioner yes. You can simply add content you want or just wrap routes as you would wrap any other components.

CMCDragonkai Over a year ago

I 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?

|

xgqfrms · Accepted Answer · 2020-10-13 11:41:48Z

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

Martin Lloyd Jose · Accepted Answer · 2017-10-10 10:20:17Z

I don't know if this helps but these are the codes that I used.

File Structure:

src

-index.js

-app(folder)

--components(folder)

---Header.js

---Home.js

---Root.js

---User.js

src/app/index.js

import React, {Component} from  "react";
import { render } from "react-dom";
import { browserHistory} from "react-router";
import { BrowserRouter as Router, Route, IndexRoute} from "react-router-dom";

import Root from "./components/Root";
import Home from "./components/Home";
import User from "./components/User";

class App extends Component {
  render() {
    return (
        <Router history={browserHistory}>
            <div>
                <Root>
                    <Route exact path={"/"} component={Home} />    
                    <Route path={"/user"} component={User} />    
                    <Route path={"/home"} component={Home} />
                </Root>
            </div>
        </Router>
    )
  }
}

render (<App />, window.document.getElementById("app"));

src/app/components/Root.js

import React, {Component} from "react";
import { render } from "react-dom";

import Header from "./Header";
import Home from "./Home";

class Root extends Component{

    render(){
        let renderData;
        renderData = (
            this.props.children
        );

        return(
            <div>
                <div className="container">
                    <div className="row">
                        <div className="col-xs-10 col-xs-offset-1">
                            <Header/>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col-xs-10 col-xs-offset-1">
                            {renderData}
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

export default Root;

src/app/components/Home.js

import React, {Component} from "react";

class Home extends Component{
    render(){
        return(
            <div>
                <p>{this.props.isExist}</p>
                <h2>Home</h2>
            </div>
        );
    }
}

export default Home;

src/app/components/User.js

import React, {Component} from "react";

class User extends Component{
    render(){
        return(
            <div>
                <h3>The user page</h3>
                <p>User ID:</p>
            </div>
        );
    }
}

export default User;

webpack.config.js

var webpack = require("webpack");
var path = require("path");

var DIST_DIR = path.resolve(__dirname, "dist");
var SRC_DIR = path.resolve(__dirname, "src");

var config = {
    entry: SRC_DIR + "/app/index.js",
    output: {
        path: DIST_DIR + "/app",
        filename: "bundle.js",
        publicPath: "/app/"
    },
    module:{
        loaders: [
            {
                test: /\.js?/,
                include: SRC_DIR,
                loader: "babel-loader",
                query:{
                    presets: ["react", "es2015", "stage-2"]
                }
            }
        ]
    }
};

module.exports = config;

Bruno Souza · Accepted Answer · 2018-06-18 12:46:54Z

1

    <Router history={browserHistory}>
        <div>
            <Root>
                <Redirect from="*" to="/home"/>
                <Route path="/home" component={Home}/>    
                <Route path={"/user"} component={User} />    
                <Route path={"/home"} component={Home} />
            </Root>
        </div>
    </Router>  try Please try this....

answered Jun 18, 2018 at 12:46

Bruno Souza

291 bronze badge

1 Comment

Karun Over a year ago

this behaviour of using asterik is relevant for react-router v3 and not v4

Shashwat Gupta · Accepted Answer · 2019-02-12 11:26:15Z

0

Simple solution

method 1:

<Route exact path="/" component={Home}/>


Note:-

<Route exact path="/" component={Home}/> 
and  <IndexRoute component={Home}/>
 both can comapre as same*

method 2:

npm install react-router@3 --save

answered Feb 12, 2019 at 11:26

Shashwat Gupta

5,31845 silver badges33 bronze badges

Collectives™ on Stack Overflow

Using React IndexRoute in react-router v4

5 Answers 5

6 Comments

react-router & no `IndexRoute` any more

refs

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

6 Comments

react-router & no IndexRoute any more

refs

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

react-router & no `IndexRoute` any more