Так как будем рассматривать только работу роутера в вэб-приложении, то нам потребуется только react-router-dom, устанавливаем.
npm install --save react-router-dom
Импортируем в приложение три компонента
import { Route, BrowserRouter, Switch} from 'react-router-dom';
Общая структура приложения с шаблоном.
class App extends Component {
render() {
return (
<BrowserRouter>
<Switch>
<Route path="/" component={ LayoutComponent } />
</Switch>
</BrowserRouter>
);
}
}
export default App;
Компонент шаблона будет подключаться при любом path, содержащем "/".
Настраиваем маршруты в шаблоне.
class LayoutComponent extends Component {
render() {
return (
<div>
<NavComponent/>
<HeaderComponent/>
<Switch>
<Route exact path="/" component={ MainComponent } />
<Route path="/index.html" component={ MainComponent }/>
<Route path="/company.html" component={ AboutComponent } />
</Switch>
<FooterComponent/>
</div>
);
}
}
export default LayoutComponent;
Параметр exact означает точное совпадение пути.