Реагируйте Маршрутизатор - полная библиотека маршрутизации для Реагирует вдохновленная системой маршрутизации Тлеющих углей
Введение
Реагируйте Маршрутизатор является мощной библиотекой маршрутизации, созданной сверху, Реагируют, который помогает Вам добавить новые экраны и потоки к Вашему приложению невероятно быстро, всем при хранении URL в синхронизации с тем, что отображается на странице.
Пример
import React from 'react' import ReactDOM from 'react-dom' import { BrowserRouter as Router, Route, Link } from 'react-router-dom' const BasicExample = () => ( <Router> <div> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/topics">Topics</Link></li> </ul> <hr/> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> <Route path="/topics" component={Topics}/> </div> </Router> ); const Home = () => ( <div> <h2>Home</h2> </div> ); const About = () => ( <div> <h2>About</h2> </div> ); const Topics = ({ match }) => ( <div> <h2>Topics</h2> <ul> <li> <Link to={`${match.url}/rendering`}> Rendering with React </Link> </li> <li> <Link to={`${match.url}/components`}> Components </Link> </li> <li> <Link to={`${match.url}/props-v-state`}> Props v. State </Link> </li> </ul> <Route path={`${match.url}/:topicId`} component={Topic}/> <Route exact path={match.url} render={() => ( <h3>Please select a topic.</h3> )}/> </div> ); const Topic = ({ match }) => ( <div> <h3>{match.params.topicId}</h3> </div> ); ReactDOM.render(<BasicExample />, document.body)