Изменение реакции маршрутизатора v3 на реакцию маршрутизатора v4

Question

У меня проблема с миграцией с реакционного маршрутизатора с3 на реагирующий маршрутизатор v4. Я не знаю, как правильно его настроить.

Я импортирую это:

import { Route, IndexRoute} from 'react-router';
import { BrowserRouter } from "react-router-dom";

Тогда я настраиваю свой роутер в рендере:

        <BrowserRouter>
            <Route path="/" component={Template}>
                <IndexRoute component={HomePage}></IndexRoute>
                <Route path="/contact" component={Contact}></Route>
            </Route>
        </BrowserRouter>

Но отображается только компонент Template.

Answer 1

У вас нет вложенности или маршрутов или IndexRoute и react-router v4, вместо этого вы можете написать вложенные маршруты внутри самих компонентов, конфигурация вашего маршрутизатора будет выглядеть как

 <BrowserRouter>
     <Route path="/" component={Template} />
 </BrowserRouter>

и в Template.js

import { Switch, Route } from 'react-router-dom';

render() {
    <div>
        {/* other content */}
        <Switch>
             <Route path="/contact" component={Contact} />
             <Route component={HomePage} />
        </Switch>
    </div>

}

A Route without a path действует как IndexRoute или маршрут по умолчанию. Кроме того, Switch отображает первый сопоставленный маршрут, поэтому, если /contact отображается, HomePage не будет отображаться

Answer 2

Попробуйте это

<BrowserRouter>
     <Route path="/" component={Template}/>
</BrowserRouter>

Затем в шаблон компонента render вкладывает оставшиеся маршруты

<div>
  <Route exact path="/" component={HomePage}/>
  <Route path="/contact" component={Contact} />
</div>

React router v4 - это серьезное обновление. Оно полностью отличается от v3.

Сначала вы читаете документы React Router v4