I'm new to React and I would like to develop a Single Page Application, so I'm using react-router four routing.

Below the main.js, where I specify the routes

import React from 'react';
import {Router,Route} from 'react-router';
import {App} from './ponents/App';
import {Login} from './ponents/Login';
import {Home} from './ponents/Home';
import { history } from 'react-router';

React.render(
<Router history={history}>
    <Route path="/" ponent={App}>
        <Route path="home" ponent={Home}/>
        <Route path="login" ponent={Login}/>

    </Route>
</Router>,
document.getElementById('main')
);

And then the App.js, as you can see I want to have a fixed Header and Footer, and then to have the content of the page change dinamically depending on the route.

import React from 'react';
import {Header} from './Header';
import {Footer} from './Footer';

export class App extends React.Component {


render() {
    console.log(this.props.children);
    return (<div>
        <Header/>
        <div className="page-content">
            {this.props.children}
        </div>
        <Footer/>
    </div>);
}


}

With this code, once the application is loaded with the path ("/"), I need to click on the link Home to display the home content, but I would like to be displayed by default, once the application is first loaded.

How can I achieve that?

Thank you!!

I'm new to React and I would like to develop a Single Page Application, so I'm using react-router four routing.

Below the main.js, where I specify the routes

import React from 'react';
import {Router,Route} from 'react-router';
import {App} from './ponents/App';
import {Login} from './ponents/Login';
import {Home} from './ponents/Home';
import { history } from 'react-router';

React.render(
<Router history={history}>
    <Route path="/" ponent={App}>
        <Route path="home" ponent={Home}/>
        <Route path="login" ponent={Login}/>

    </Route>
</Router>,
document.getElementById('main')
);

And then the App.js, as you can see I want to have a fixed Header and Footer, and then to have the content of the page change dinamically depending on the route.

import React from 'react';
import {Header} from './Header';
import {Footer} from './Footer';

export class App extends React.Component {


render() {
    console.log(this.props.children);
    return (<div>
        <Header/>
        <div className="page-content">
            {this.props.children}
        </div>
        <Footer/>
    </div>);
}


}

With this code, once the application is loaded with the path ("/"), I need to click on the link Home to display the home content, but I would like to be displayed by default, once the application is first loaded.

How can I achieve that?

Thank you!!

• javascript
• reactjs
• react-router
• react-router-ponent
• react-routing

Share Improve this question Follow asked Dec 8, 2015 at 18:45 fgonzalezfgonzalez 3,88777 gold badges5656 silver badges8484 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

I think you probably want to use an IndexRoute as described here in the React Router documentation.

Your router would then look something like this:

<Router history={history}>
    <Route path="/" ponent={App}>
        <IndexRoute ponent={Home}/>
        <Route path="login" ponent={Login}/>
    </Route>
</Router>

It's usefull when nested IndexRoute.

<div>
    <Redirect from="/" to="home"/>
    <Route path="/" ponent={App}>
        <Route path="home" ponent={Home}>
            <IndexRoute ponent={IndexView} />
            <Route path="other" ponent={OtherView}></Route>
        </Route>
        <Route path="about" ponent={About}></Route>

    </Route>
</div>

In later versions of react-router, you can use ÌndexRedirect. This way you're not obligated to put your home screen under the route "/". Users navigating to "/" will simply be redirected to "/home".

<Router history={history}>
    <Route path="/" ponent={App}>
        <IndexRedirect to="home"/>
        <Route path="home" ponent={Home}/>
        <Route path="login" ponent={Login}/>
    </Route>
</Router>

Things have changed a lot in React v6. I think you can now achieve what you want with the following specification:

  <BrowserRouter>
    <Routes>
      <Route path="/" element={<App />} >
        <Route path="/home" element={<Home/>} />
        <Route path="/login" element={<Login />} />
        <Route path="/" element={<Home />} />
      </Route>
    </Routes>
  </BrowserRouter>

If the specification of the App ponent declares it as an Outlet, the Routes code above will always render it, irrespective of whether the path is "/", "/home" or "/login". Within the nested group, "/home" or "/login" paths will then add Home or Login displays as you would expect, but a "/" path will also add Home as a "default".

Alternatively, but perhaps less prehensibly, you can use the "index" keyword to render a default Home ponent within the nested group:

       <Route index element={<Home />} />