React Router v4: полное руководство

 <Route path={`${match.path}/:name`} render= {({match}) =>( <div> <h3> {match.params.name} </h3></div>)}/> 

Это наша первая попытка динамической маршрутизации. Вместо жесткого кодирования маршрутов мы использовали переменную внутри пути. :name является параметром пути и перехватывает все после category/ до следующей косой черты. Таким образом, путь, например products/running-shoes , создаст объект params следующим образом:

 { name: 'running-shoes' } 

Захваченные данные должны быть доступны по адресу match.params или props.match.params зависимости от того, как передаются реквизиты. Другая интересная вещь заключается в том, что мы использовали render реквизит. реквизит render очень удобен для встроенных функций, которые не требуют собственного компонента.

Демонстрация 3: Вложенная маршрутизация с параметрами Path

Давайте все усложним немного, не так ли? Реальный маршрутизатор будет иметь дело с данными и отображать их динамически. Предположим, что у нас есть данные о продукте, возвращаемые серверным API в форме ниже.

SRC / Products.jsx

 const productData = [ { id: 1, name: 'NIKE Liteforce Blue Sneakers', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie.', status: 'Available' }, { id: 2, name: 'Stylised Flip Flops and Slippers', description: 'Mauris finibus, massa eu tempor volutpat, magna dolor euismod dolor.', status: 'Out of Stock' }, { id: 3, name: 'ADIDAS Adispree Running Shoes', description: 'Maecenas condimentum porttitor auctor. Maecenas viverra fringilla felis, eu pretium.', status: 'Available' }, { id: 4, name: 'ADIDAS Mid Sneakers', description: 'Ut hendrerit venenatis lacus, vel lacinia ipsum fermentum vel. Cras.', status: 'Out of Stock' }, ]; 

Нам нужно создать маршруты для следующих путей:

• /products . Это должно отобразить список продуктов.
• /products/:productId . Если продукт с :productId существует, он должен отображать данные продукта, а если нет, то должен отображать сообщение об ошибке.

SRC / Products.jsx

 /* Import statements have been left out for code brevity */ const Products = ({ match }) => { const productsData = [ { id: 1, name: 'NIKE Liteforce Blue Sneakers', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin molestie.', status: 'Available' }, //Rest of the data has been left out for code brevity ]; /* Create an array of `<li>` items for each product var linkList = productsData.map( (product) => { return( <li> <Link to={`${match.url}/${product.id}`}> {product.name} </Link> </li> ) }) return( <div> <div> <div> <h3> Products</h3> <ul> {linkList} </ul> </div> </div> <Route path={`${match.url}/:productId`} render={ (props) => <Product data= {productsData} {...props} />}/> <Route exact path={match.url} render={() => ( <div>Please select a product.</div> )} /> </div> ) } 

Сначала мы создали список <Links> с использованием productsData.id и сохранили его в linkList . Маршрут принимает параметр в строке пути, который соответствует идентификатору продукта.

 <Route path={`${match.url}/:productId`} render={ (props) => <Product data= {productsData} {...props} />}/> 

Возможно, вы ожидали component = { Product } вместо встроенной функции рендеринга. Проблема в том, что нам нужно передать productsData компоненту Product вместе со всеми существующими реквизитами. Хотя есть и другие способы сделать это, я считаю этот метод наиболее простым. {...props} props {...props} использует синтаксис расширения ES6 для передачи всего объекта props компоненту.

Вот код для компонента продукта.

SRC / Product.jsx

 /* Import statements have been left out for code brevity */ const Product = ({match,data}) => { var product= data.find(p => p.id == match.params.productId); var productData; if(product) productData = <div> <h3> {product.name} </h3> <p>{product.description}</p> <hr/> <h4>{product.status}</h4> </div>; else productData = <h2> Sorry. Product doesnt exist </h2>; return ( <div> <div> {productData} </div> </div> ) } 

Метод find используется для поиска в массиве объекта со свойством id, равным match.params.productId . Если продукт существует, отображается productData . Если нет, то выводится сообщение «Товар не существует».

Защита маршрутов

В заключительной демонстрации мы обсудим методы защиты маршрутов. Так что, если кто-то попытается получить доступ к /admin , он должен будет сначала войти в систему. Однако есть некоторые вещи, которые мы должны охватить, прежде чем сможем защитить маршруты.

Перенаправление

Как и перенаправления на стороне сервера, <Redirect> заменит текущее местоположение в стеке истории новым местоположением. Новое местоположение указывается to поддержки. Вот как мы будем использовать <Redirect> :

 <Redirect to={{pathname: '/login', state: {from: props.location}}} 

Таким образом, если кто-то попытается получить доступ к /admin во время выхода из системы, он будет перенаправлен на маршрут /login . Информация о текущем местоположении передается через состояние, поэтому, если аутентификация прошла успешно, пользователь может быть перенаправлен обратно в исходное местоположение. Внутри дочернего компонента вы можете получить доступ к этой информации по адресу this.props.location.state .

Пользовательские маршруты

Пользовательский маршрут — это модное слово для маршрута, вложенного в компонент. Если нам нужно принять решение о том, следует ли отображать маршрут или нет, написание нестандартного маршрута — это путь. Вот пользовательский маршрут, объявленный среди других маршрутов.

SRC / App.js

 /* Add the PrivateRoute component to the existing Routes */ <Switch> <Route exact path="/" component={Home} data={data}/> <Route path="/category" component={Category}/> <Route path="/login" component={Login}/> <PrivateRoute authed={fakeAuth.isAuthenticated} path='/products' component = {Products} /> </Switch> 

fakeAuth.isAuthenticated возвращает true, если пользователь вошел в систему, и false в противном случае.

Вот определение для PrivateRoute:

SRC / App.js

 /* PrivateRoute component definition */ const PrivateRoute = ({component: Component, authed, ...rest}) => { return ( <Route {...rest} render={(props) => authed === true ? <Component {...props} /> : <Redirect to={{pathname: '/login', state: {from: props.location}}} />} /> ) } 

Маршрут отображает компонент Admin, если пользователь вошел в систему. В противном случае пользователь перенаправляется в /login . Преимущество этого подхода в том, что он явно более декларативный, а PrivateRoute можно использовать повторно.

Наконец, вот код для компонента Login:

SRC / Login.jsx

 import React from 'react'; import { Redirect } from 'react-router-dom'; class Login extends React.Component { constructor() { super(); this.state = { redirectToReferrer: false } // binding 'this' this.login = this.login.bind(this); } login() { fakeAuth.authenticate(() => { this.setState({ redirectToReferrer: true }) }) } render() { const { from } = this.props.location.state || { from: { pathname: '/' } } const { redirectToReferrer } = this.state; if (redirectToReferrer) { return ( <Redirect to={from} /> ) } return ( <div> <p>You must log in to view the page at {from.pathname}</p> <button onClick={this.login}>Log in</button> </div> ) } } /* A fake authentication function */ export const fakeAuth = { isAuthenticated: false, authenticate(cb) { this.isAuthenticated = true setTimeout(cb, 100) }, } 

Строка ниже демонстрирует разрушение объекта , которое является частью спецификации ES6.

 const { from } = this.props.location.state || { from: { pathname: '/' } } 

Давайте соединим кусочки головоломки вместе, ладно? Вот последняя демонстрация приложения, которое мы создали с использованием маршрутизатора React:

Демонстрация 4: Защита маршрутов

Резюме

Как вы видели в этой статье, React Router — мощная библиотека, которая дополняет React для создания лучших декларативных маршрутов. В отличие от предыдущих версий React Router, в v4 все «просто компоненты». Более того, новый шаблон дизайна идеально вписывается в стиль действий React.

В этом уроке мы узнали:

• как настроить и установить React Router
• основы маршрутизации и некоторые важные компоненты, такие как <Router> , <Route> и <Link>
• как создать минимальный роутер для навигации и вложенных маршрутов
• как строить динамические маршруты с параметрами пути

Наконец, мы изучили некоторые продвинутые методы маршрутизации для создания финальной демонстрации для защищенных маршрутов.