Подключаем React Router в приложении React

Подключаем React Router в приложении React

Есть и другие приложения для роутинга, но популярное React Router, его можно использовать как для web, так и для native. Сайт его:https://reacttraining.com/react-router/

Устанавливаем React Router в папке проекта

npm install react-router-dom

Импортируем в App.js

import {BrowserRouter as Router, Route, Link} from 'react-router-dom';

Пример, который получился:

Файл App.js:

import React from 'react';
import {BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom';
import TodoPage from './TodoPage';
import WelcomePage from './WelcomePage';

const App = () =>(
  <Router>
    <Switch>
      <Route exact path='/(welcome)?' component={WelcomePage} />
      <Route path='/todo' component={TodoPage} />
      <Redirect to='/' />
    </Switch>
  </Router>
);

export default App;

Файл TodoPage.js

import React from 'react';

const TodoPage = () =>{
  return(
    <div>
      <h1>Список задач</h1>
    </div> 
  );
};

export default TodoPage;

Файл WelcomePage.js

import React from 'react';

const WelcomePage = () => (
  <h1>Добро пожаловать!</h1>
);

export default WelcomePage;