Как отобразить маршрут по умолчанию с помощью React-Router

Question

Я новичок в React, и я хотел бы разработать приложение с одной страницей, поэтому я использую маршрутизацию с 4-мя маршрутизаторами.

Ниже main.js, где указать маршруты,

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

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

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

а затем App.js, как вы можете видеть, что я хочу, чтобы иметь фиксированный Колонтитулы, а затем, чтобы иметь содержание изменение страницы происходит динамически в зависимости от маршрута.

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>); 
} 


} 

С помощью этого кода, после того, как приложение загружается с пути («/»), мне нужно нажать на ссылку Home, чтобы отобразить содержание дома, но я хотел бы быть по умолчанию отображается, когда приложение сначала загружается.

Как я могу это достичь?

спасибо !!

Answer 1

Я думаю, вы, вероятно, захотите использовать IndexRoute, как описано here в документации по реагентному маршрутизатору.

Ваш маршрутизатор будет выглядеть примерно так:

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

Answer 2

Это полезно, когда вложенные IndexRoute.

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

    </Route> 
</div> 

Answer 3

В более поздних версиях react-router, вы можете использовать ÌndexRedirect. Таким образом, вы не обязаны помещать свой домашний экран под маршрут «/». Пользователи, перемещающиеся в «/», просто будут перенаправлены на «/ home».

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