Начало работы с React Router

В этой серии руководств вы узнаете о response-router v4, который является стабильной версией, которая в настоящее время используется в большинстве проектов React.

Если вы не знаете, как реагировать, сначала прочтите Учебники по реагированию или

Вы можете проверить курсы с лучшими реакциями.

Вступление
Что такое реактивный роутер?
Как установить реактивный роутер?
Маршрутизация
Добавить 404 страницы
Что такое страница 404?
Что такое переключатель
Параметры URL
Вложенные маршруты
Программная навигация

Вступление

Что такое реактивный маршрутизатор?

Маршрутизатор React - это библиотека маршрутизации, построенная на основе react, которая используется для создания маршрутизации в приложениях React.

Реагирующий маршрутизатор статический или динамический?

До реагирующего маршрутизатора v4 он статичен, после v4 он является динамическим.

В одностраничных приложениях есть только одна html-страница. Мы повторно используем одну и ту же html-страницу для визуализации различных компонентов на основе навигации.

Но в многостраничных приложениях вы получите совершенно новую страницу с сервера при навигации.

Если вы застряли где-то посередине, обратитесь к« репозиторию кода »

Начиная

Как установить реагирующий роутер?

мы используем приложение create-response-app для создания приложения.

npx create-react-app routing
cd routing

Чтобы установить реагирующий маршрутизатор, вам необходимо загрузить пакет response-router-dom, выполнив следующие команды.

npm install react-router-dom
npm start  //to run  dev server

Теперь откройте папку маршрутизации в вашем любимом редакторе кода.

Если вы перейдете к общедоступному / index.html, вы увидите один файл html, который выглядит следующим образом.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

В настоящее время в нашем приложении есть только один компонент приложения.

Создадим еще два компонента.

users.js

import React from 'react'
class Users extends React.Component {
  render() {
    return <h1>Users</h1>
  }
}
export default Users

contact.js

import React from 'react'
class Contact extends React.Component {
  render() {
    return <h1>Contact</h1>
  }
}
export default Contact

app.js

import React from 'react'
class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Home</h1>
      </div>
    )
  }
}
export default App

Теперь наше приложение состоит из трех компонентов: один - это приложение, а два других - это пользователи и контакт.

Маршрутизация

откройте файл index.js и импортируйте три компонента (приложение, пользователи, контакт)

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'
import Users from './users'
import Contact from './contact'
ReactDOM.render(<App />, document.getElementById('root'))

Маршрутизатор React предоставляет нам три компонента [Route, Link, BrowserRouter], которые помогают нам реализовать маршрутизацию.

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import './index.css'
import App from './App'
import Users from './users'
import Contact from './contact'
ReactDOM.render(<App />, document.getElementById('root'))

Реализуем маршрутизацию.

В компоненте Route нам нужно передать два свойства

path: значит, нам нужно указать путь.
компонент: какой компонент должен видеть пользователь, когда он перейдет по этому пути.

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import App from './App'
import Users from './users'
import Contact from './contact'
const routing = (
  <Router>
    <div>
      <Route path="/" component={App} />
      <Route path="/users" component={Users} />
      <Route path="/contact" component={Contact} />
    </div>
  </Router>
)
ReactDOM.render(routing, document.getElementById('root'))

Теперь, если вы введете вручную localhost: 3000 / users, вы увидите, что компонент «Пользователи» отображается.

Но, тем не менее, компонент Home также отображается на экране, это происходит из-за того, что наш домашний путь - '/', а путь пользователя - '/ users' слэш одинаков в обоих путях, поэтому оба компонента отображаются в Чтобы остановить это поведение, нам нужно использовать точную опору.

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import App from './App'
import Users from './users'
import Contact from './contact'
const routing = (
  <Router>
    <div>
      <Route exact path="/" component={App} />
      <Route path="/users" component={Users} />
      <Route path="/contact" component={Contact} />
    </div>
  </Router>
)
ReactDOM.render(routing, document.getElementById('root'))

Теперь, если вы видите, что на экране отображается только пользовательский компонент.

Добавление навигации с помощью компонента "Ссылка"

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter as Router } from 'react-router-dom'
import App from './App'
import Users from './users'
import Contact from './contact'
const routing = (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/users">Users</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
      <Route exact path="/" component={App} />
      <Route path="/users" component={Users} />
      <Route path="/contact" component={Contact} />
    </div>
  </Router>
)
ReactDOM.render(routing, document.getElementById('root'))

После добавления навигации вы увидите, что маршруты отображаются на экране. если вы нажмете на пользователей, вы увидите, что URL-адрес меняется, и отображается компонент «Пользователи».

Добавление 404 страницы

Что такое страница 404?

Страница 404 также называется не найденной страницей. Это означает, что когда пользователь переходит по неправильному пути, которого нет на веб-сайте, нам нужно показать не найденную страницу.

Как добавить страницу 404 в React?

нам нужно импортировать другой компонент под названием Switch, который предоставляется реагирующим маршрутизатором.

Что такое Switch?

Компонент Switch помогает нам отображать компоненты только тогда, когда путь совпадает, в противном случае он возвращается к ненайденному компоненту.

давайте создадим компонент Not found.

notfound.js

import React from 'react'
const Notfound = () => <h1>Not found</h1>
export default Notfound

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter as Router, Switch } from 'react-router-dom'
import App from './App'
import Users from './users'
import Contact from './contact'
import Notfound from './notfound'
const routing = (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/users">Users</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path="/" component={App} />
        <Route path="/users" component={Users} />
        <Route path="/contact" component={Contact} />
        <Route component={Notfound} />
      </Switch>
    </div>
  </Router>
)
ReactDOM.render(routing, document.getElementById('root'))

Давайте проверим это сейчас, введя неверный путь вручную localhost: 3000 / posts.

Параметры URL

Параметры URL-адреса помогают нам отображать один и тот же компонент на основе его динамического URL-адреса, как в нашем компоненте «Пользователи», предполагающем, что это разные пользователи с идентификаторами 1,2,3.

<Route path="users/:id" component={Users} />

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter as Router, Switch } from 'react-router-dom'
import App from './App'
import Users from './users'
import Contact from './contact'
import Notfound from './notfound'
const routing = (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/users">Users</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path="/" component={App} />
        <Route path="/users/:id" component={Users} />
        <Route path="/contact" component={Contact} />
        <Route component={Notfound} />
      </Switch>
    </div>
  </Router>
)
ReactDOM.render(routing, document.getElementById('root'))

Откройте файл users.js и добавьте console.log (this.props).

users.js

import React from 'react'
class Users extends React.Component {
  render() {
    console.log(this.props)
    return <h1>Users</h1>
  }
}
export default Users

Теперь откройте свой браузер и вручную введите этот URL-адрес localhost: 3000 / users / 1, вы увидите объект в вашей консоли, который передается маршрутизатором реакции.

Вы видели объект params с идентификатором 1, который мы передали в url localhost: 3000 / users / 1.

Давайте отобразим этот идентификатор 1 на экране.

users.js

import React from 'react'
class Users extends React.Component {
  render() {
    const { params } = this.props.match
    return (
      <div>
        <h1>Users</h1>
        <p>{params.id}</p>
      </div>
    )
  }
}
export default Users

Вы видели, что сейчас на экране рендерится 1?

Вложенные маршруты

Вложенная маршрутизация помогает нам отображать суб-маршруты, такие как users / 1, users / 2 и т. Д.

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import { Route, Link, BrowserRouter as Router, Switch } from 'react-router-dom'
import App from './App'
import Users from './users'
import Contact from './contact'
import Notfound from './notfound'
const routing = (
  <Router>
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/users">Users</Link>
        </li>
        <li>
          <Link to="/contact">Contact</Link>
        </li>
      </ul>
      <hr />
      <Switch>
        <Route exact path="/" component={App} />
        <Route exact path="/users" component={Users} />
        <Route path="/contact" component={Contact} />
        <Route component={Notfound} />
      </Switch>
    </div>
  </Router>
)
ReactDOM.render(routing, document.getElementById('root'))

Как реализовать вложенную маршрутизацию?

В файле users.js нам нужно импортировать компоненты реагирующего маршрутизатора, потому что нам нужно реализовать подмаршруты внутри компонента Users.

users.js

import React from 'react'
import { Route, Link } from 'react-router-dom'
const User = ({ match }) => <p>{match.params.id}</p>
class Users extends React.Component {
  render() {
    const { url } = this.props.match
    return (
      <div>
        <h1>Users</h1>
        <strong>select a user</strong>
        <ul>
          <li>
            <Link to="/users/1">User 1 </Link>
          </li>
          <li>
            <Link to="/users/2">User 2 </Link>
          </li>
          <li>
            <Link to="/users/3">User 3 </Link>
          </li>
        </ul>
        <Route path="/users/:id" component={User} />
      </div>
    )
  }
}
export default Users

активные стили с помощью NavLink

NavLink

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

В чем разница между NavLink и Link?

Ссылка используется для навигации по различным маршрутам на сайте. Но NavLink используется для добавления атрибутов стиля к активным маршрутам.

В нашем приложении маршрутизации у нас есть три маршрута: [home, / users, / contact]. Давайте стилизуем их с помощью NavLink.

Нам нужно добавить новую опору с именем activeClassName к компоненту NavLink, чтобы он применял этот класс всякий раз, когда маршрут активен.

добавьте эти стили в файл index.css

index.css

body {
margin: 0;
padding: 2rem;
font-family: sans-serif;
}
.active{
   color:red;
}

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import {
  Route,
  NavLink,
  BrowserRouter as Router,
  Switch,
} from 'react-router-dom'
import App from './App'
import Users from './users'
import Contact from './contact'
import Notfound from './notfound'
const routing = (
  <Router>
    <div>
      <ul>
        <li>
          <NavLink exact activeClassName="active" to="/">
            Home
          </NavLink>
        </li>
        <li>
          <NavLink activeClassName="active" to="/users">
            Users
          </NavLink>
        </li>
        <li>
          <NavLink activeClassName="active" to="/contact">
            Contact
          </NavLink>
        </li>
      </ul>
      <hr />
      <Switch>
        <Route exact path="/" component={App} />
        <Route path="/users" component={Users} />
        <Route path="/contact" component={Contact} />
        <Route component={Notfound} />
      </Switch>
    </div>
  </Router>
)
ReactDOM.render(routing, document.getElementById('root'))

Теперь вы можете видеть, что к активным маршрутам применен красный цвет.

Программная навигация

Что такое программная навигация?

Это означает, что нам нужно перенаправить пользователя, когда на этом маршруте происходит событие.

Например, когда пользователь успешно вошел в систему, он или она будет перенаправлен на домашнюю страницу.

Как программно перемещаться в реактивном маршрутизаторе?

Для программной навигации нам нужно воспользоваться помощью объекта истории, который передается маршрутизатором реакции.

Давайте добавим контактную форму в наш компонент "Контакты".

В объекте истории доступен метод push, с помощью которого мы перенаправляем пользователя на домашнюю страницу всякий раз, когда пользователь отправляет форму.

contact.js

import React from 'react'
class Contact extends React.Component {
  onSubmit = () => {
    this.props.history.push('/')
  }
  render() {
    return (
      <form>
        <input placeholder="name" type="name" />
        <input placeholder="email" type="email" />
        <button onClick={this.onSubmit}>Submit</button>
      </form>
    )
  }
}
export default Contact

Репозиторий кода

изначально опубликовано на reactgo.com

Другие уроки

Оформить заказ на мое расширение для Chrome Html Scan, чтобы мгновенно копировать текст или код одним щелчком мыши.

✉️ Подпишитесь на рассылку еженедельно Email Blast 🐦 Подпишитесь на CodeBurst на Twitter , просмотрите 🗺️ Дорожная карта веб-разработчиков на 2018 год и 🕸️ Изучите веб-разработку с полным стеком .

Начало работы с React Router

Оглавление

Вступление

Что такое реактивный маршрутизатор?

Реагирующий маршрутизатор статический или динамический?

Начиная

Как установить реагирующий роутер?

Маршрутизация

Добавление навигации с помощью компонента "Ссылка"

Добавление 404 страницы

Что такое страница 404?

Как добавить страницу 404 в React?

Что такое Switch?

Параметры URL

Вложенные маршруты

Как реализовать вложенную маршрутизацию?

активные стили с помощью NavLink

NavLink

В чем разница между NavLink и Link?

Программная навигация

Что такое программная навигация?

Как программно перемещаться в реактивном маршрутизаторе?

Вопросы по теме