ReactJS Route

Установка командою yarn add react-router-dom

Обернути всю програму в BrowserRouter файл index.js

import {BrowserRouter} from 'react-router-dom'

const app = (
    <BrowserRouter>
        <App />
   </BrowserRouter>
) 

Підключення до компоненту

import {Route} from 'react-router-dom'

Параметр exact - відображає цю сторінку, якщо адреса повністю збігається

<Route path="/" exact render={() => <h1>Home Page</h1>} /> 

Виведення компонента

<Route path="/about" component={About} />

або
<Route path="/about"  render={() => <About />} />

Реалізація навігації

exact - теж що і в роутах

activeClassName - змінює назву класу для активного посилання

activeStyle - додає inline-стилі

import {NavLink} from 'react-router-dom'

<NavLink to="/cars">Cars</NavLink>

<NavLink to="/" exact activeClassName={'wfm-active'} activeStyle={{ color: 'blue' }}>Home</NavLink>

<NavLink to={{ pathname: '/about', search: '?a=1&b=2', hash: 'wfm-hash' }}>About</NavLink>

Обернути елемент у просте посилання

import {Link} from 'react-router-dom'

<Link to="/">Посилання</Link>

Програмна зміна сторінки

this.props.history.push('/')
this.props.history.push({ pathname: '/' })

Додавання до компоненту в props параметрів роутингу

import {withRouter} from 'react-router-dom'

export default withRouter(Car)

Компонент Switch - видає перший відповідний роут (алтернатива exact)

import {Switch} from 'react-router-dom'

<Switch>
       <Route path="/" exact render={() => <h1>Home Page</h1>} />
       <Route path="/about" component={About} />
       <Route path="/cars/:name" component={CarDetail} />
       <Route path="/cars" component={Cars} />
</Switch>

Отримання переданого параметра :name

{this.props.match.params.name}

Редирект у роутах

import {Redirect} from 'react-router-dom'

 <Redirect from={'/about'} to={'/cars'} />

 <Redirect to={'/'} />