Каталог этой серии

01 Предисловие

02 Настройка среды разработки

03 Леса для создания проекта Все является компонентом

04 Основные функции JSX, реквизит, состояние, жизненный цикл, событие, стиль

05 Управление рендерингом компонентов

06 Компоненты контейнера, компоненты дисплея

07 Реакция-маршрутизатор внешней маршрутизации

08 Реакция управления состоянием

09 Выборка запроса данных

10 Проверка типов свойств

Лайк - это добродетель :)

Быстрый старт React — 07 Интерфейсная маршрутизация

Цель

Основное использование
Передача параметров
сопоставление маршрутов
анимация перехода
маршрут прыжка

окружающая обстановка

react 16
react-router 4
react-router-dom 4
react-transition-group

0. Установить

Через официальный сайт мы можем найтиreact-routerможно использовать вweb 网站端 native 设备端

Мы здесь дляweb 网站端Установить

yarn add react-router-dom

react-routerПакет автоматически установит зависимости

1. Сначала запустите простой пример

демонстрация кода

import React, {Component} from 'react'
import {HashRouter as Router, Route, Link, Switch} from 'react-router-dom'

const Home = () => (
  <div>
    <h2>首页</h2>
  </div>
)
const About = () => (
  <div>
    <h2>关于</h2>
  </div>
)

class RouterView extends Component {
  render() {
    return (
      <Router>
        <div>
          <ul>
            <li>
              <Link to="/">首页</Link>
            </li>
            <li>
              <Link to="/about">关于</Link>
            </li>
          </ul>

          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
          </Switch>
        </div>
      </Router>
    )
  }
}

export default RouterView

структура кода

Самый внешний слой должен обернуть компонент<Router>компоненты<Route>Это содержимое компонента, которое вы видите, и оно отображается везде, где оно находится. компоненты<Link>это ссылка на страницу

Описание фильма

codepen

https://codepen.io/ducafecat/pen/GdBPqZ

2. Основное использование

2.1 `BrowserRouter`еще`HashRouter`

BrowserRouterЭто требует сотрудничества с сервером.Он основан на pushState и replaceState из html5.Многие браузеры не поддерживают его, и возникают проблемы с совместимостью.

Адрес ссылки такой же длиныhttp://localhost:3000/about

HashRouterэто маршрут парсинга на стороне браузера

Адрес ссылки такой же длиныhttp://localhost:3000#/about

Гибкое переключение

import {HashRouter as Router, Route, Link, Switch} from 'react-router-dom'
//import {BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom'

<Router>
  ...
</Router>

я используюas RouterСделал псевдоним для удобства переключения

2.2 Компоненты`<Route>`Атрибуты`exact`полное совпадение

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

exact=falseкогдаpathравный/about /about/meможет соответствовать

ноexact=trueтолько когда совпадаютpathравный/about

2.3 Компоненты`<Route>`Атрибуты`strict`совпадение завершающих косых черт

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

когдаstrict=trueЗапросы маршрутизации должны заканчиваться/

2.4 Компоненты`<Link>`

Создание ссылок маршрутизации

Атрибутыto: string

строка адреса маршрутизации

<Link to="/about?me=haha">关于</Link>

Атрибутыto: object

объект маршрута

<Link to={{
  pathname: '/courses',
  search: '?sort=name',
  hash: '#the-hash',
  state: { fromDashboard: true }>关于</Link>

Атрибутыreplace: bool

настраиватьtrueЗаменить объект браузераhistoryДля текущего маршрута, когда вы нажмете кнопку «Назад», вы обнаружите, что предыдущий маршрут был заменен

2.5 Компоненты`<NavLink>`

На основе сгенерированной ссылки маршрута, если текущий маршрут настроен на активацию стиля

АтрибутыactiveClassName: string

имя стиля

<NavLink to="/about" activeClassName="selected">关于</NavLink>

АтрибутыactiveStyle: object

объект стиля

<NavLink to="/about" activeStyle={{
    fontWeight: 'bold',
    color: 'red'
   }}>关于</NavLink>

АтрибутыisActive: func

Функция суждения

const checkIsActive = (match, location) => {
  if (!match) {
    return false
  }
  ...
  return true
}

<NavLink to="/about" isActive={checkIsActive}>关于</NavLink>

2.6 Компоненты`<Switch>`

Отображать только первый, который соответствует текущему адресу доступа<Route>или<Redirect>

В противном случае у вас есть несколько<Route>покажет

2.7 Компоненты`<Redirect>`

перенаправление маршрута

<Switch>
  <Redirect from='/users/:id' to='/users/profile/:id'/>
  <Route path='/users/profile/:id' component={Profile}/>
</Switch>

по запросу/users/:idперенаправлен на '/users/profile/:id'

Атрибутыfrom: string

Путь для перенаправления, который необходимо сопоставить.

Атрибутыto: string

Строка URL перенаправления

Атрибутыto: object

перенаправленный объект местоположения

Атрибутыpush: bool

Если true, операция перенаправления добавит новый адрес в историю доступа, и вернуться на предыдущую страницу будет невозможно.

2.8 Компоненты`<Prompt>`

Сделайте несколько подсказок, когда пользователь покидает текущую страницу.

Атрибутыmessage: stringПодсказка, которая устанавливается, когда пользователь покидает текущую страницу.

<Prompt message="确定要离开？" />

Атрибутыmessage: func

Когда пользователь покидает текущую страницу, функция обратного вызова set

<Prompt message={location => `确定要去 ${location.pathname} ?`} />

Атрибутыwhen: bool

Решите, следует ли включить подсказку

3. Передача параметров

3.1 Написание определения маршрута

<Route path="/topics/:topicId" component={Topic} />

:topicIdопределить параметры

3.2 Напишите принимающий компонент

const Topic = ({match}) => (
  <div>
    <h3>参数: {match.params.topicId}</h3>
  </div>
)

match.paramsэто переданный параметр

3.3 Полный пример

код

import React, {Component} from 'react'
import {BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom'

const Topic = ({match}) => (
  <div>
    <h3>参数: {match.params.topicId}</h3>
  </div>
)

class RouterView extends Component {
  render() {
    return (
      <Router>
        <div>
          <ul>
            <li>
              <Link to="/topics/rendering">Rendering with React</Link>
            </li>
            <li>
              <Link to="/topics/components">Components</Link>
            </li>
            <li>
              <Link to="/topics/props-v-state">Props v. State</Link>
            </li>
          </ul>

          <Switch>
            <Route path="/topics/:topicId" component={Topic} />
          </Switch>
        </div>
      </Router>
    )
  }
}

export default RouterView

Эффект движущегося изображения

4. Нет соответствия

код

import React, {Component} from 'react'
import {BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom'

const Back = () => (
  <div>
    <h2>首页</h2>
  </div>
)

const NoMatch = () => (
  <div>
    <h2>没有匹配</h2>
  </div>
)

class RouterView extends Component {
  render() {
    return (
      <Router>
        <div>
          <ul>
            <li>
              <Link to="/back">返回</Link>
            </li>
            <li>
              <Link to="/also/will/not/match">路由请求</Link>
            </li>
          </ul>

          <Switch>
            <Route path="/back" component={Back} />
            <Route component={NoMatch} />
          </Switch>
        </div>
      </Router>
    )
  }
}

export default RouterView

Напишите компонент по умолчанию внизу, он не попал, вот и все

Эффект движущегося изображения

5. Вложенная маршрутизация

существуетreact-route4Вложенные в него должны быть написаны так

<Switch>
  <Route path="/article" component={ArticleList} />
  <Route path="/article/:id" component={Article} />
  <Route path="/article/:id/recommend" component={ArticleRecommend} />
</Switch>

Написано подряд, дело в следующем

path	компоненты	иллюстрировать
/article	ArticleList	Список статей
/article/:id	Article	статья
/article/:id/recommend	ArticleRecommend	Рекомендация статьи

6. Пользовательская маршрутизация

Подходит для проверки разрешений

6.1 Создать пользовательский`Route`

const isAuthenticated = true
const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      isAuthenticated ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: "/login",
            state: { from: props.location }
          }}
        />
      )
    }
  />
);

6.2 Использование пользовательских маршрутов

...
<Route path="/public" component={Public} />
<Route path="/login" component={Login} />
<PrivateRoute path="/protected" component={Protected} />

7. Анимация перехода

используется здесьreact-transition-groupбиблиотека

Эффект движущегося изображения

7.1 Установка

yarn add react-transition-group

7.2 Написание анимации`css`

документfade.css

.fade-enter {
  opacity: 0;
  z-index: 1;
}

.fade-enter-active {
  opacity: 1;
  transition: opacity 250ms ease-in;
}

.fade-exit {
  opacity: 0;
}

имя	иллюстрировать
fade-enter	начало анимации
fade-enter-active	анимация активирована
fade-exit	Анимация

Другие названия стилей анимации могут относиться кcss-transition

7.3 Импорт пакетов и стилей анимации

...
import {TransitionGroup, CSSTransition} from 'react-transition-group'
import './fade.css'

TransitionGroup, CSSTransitionдолжны быть импортированы

7.4 Стили письма

const styles = {}

styles.fill = {
  position: 'relative',
  height: '200px',
  width: '500px'
}

styles.content = {
  ...styles.fill,
  top: '40px',
  textAlign: 'center',
  height: '120px'
}

styles.nav = {
  padding: 0,
  margin: 0,
  position: 'absolute',
  top: 0,
  height: '40px',
  width: '100%',
  display: 'flex'
}

styles.navItem = {
  textAlign: 'center',
  flex: 1,
  listStyleType: 'none',
  padding: '10px'
}

styles.hsl = {
  color: 'white',
  paddingTop: '20px',
  fontSize: '30px',
  height: '120px'
}

styles.rgb = {
  color: 'white',
  paddingTop: '20px',
  fontSize: '30px',
  height: '120px'
}

ЭтоreactОбъект стиля, конечно, вы также можете написать как.cssдокумент

7.5 Написание навигации

const NavLink = props => (
  <li style={styles.navItem}>
    <Link {...props} style={{color: 'inherit'}} />
  </li>
)

7.6 Написание компонентов презентации

// 切换区域 A
const HSL = ({match: {params}}) => (
  <div
    style={{
      ...styles.fill,
      ...styles.hsl,
      background: `hsl(${params.h}, ${params.s}%, ${params.l}%)`
    }}
  >
    hsl({params.h}, {params.s}%, {params.l}%)
  </div>
)

// 切换区域 B
const RGB = ({match: {params}}) => (
  <div
    style={{
      ...styles.fill,
      ...styles.rgb,
      background: `rgb(${params.r}, ${params.g}, ${params.b})`
    }}
  >
    rgb({params.r}, {params.g}, {params.b})
  </div>
)

7.7 Написание компонентов контейнера

const RouterView = () => (
  <Router>
    <Route
      render={({location}) => (
        <div style={styles.fill}>
          <Route
            exact
            path="/"
            render={() => <Redirect to="/hsl/10/90/50" />}
          />

          <ul style={styles.nav}>
            <NavLink to="/hsl/10/90/50">Red</NavLink>
            <NavLink to="/hsl/120/100/40">Green</NavLink>
            <NavLink to="/rgb/33/150/243">Blue</NavLink>
            <NavLink to="/rgb/240/98/146">Pink</NavLink>
          </ul>

          <div style={styles.content}>
            <TransitionGroup>
              <CSSTransition key={location.key} classNames="fade" timeout={300}>
                <Switch location={location}>
                  <Route exact path="/hsl/:h/:s/:l" component={HSL} />
                  <Route exact path="/rgb/:r/:g/:b" component={RGB} />
                  <Route render={() => <div>Not Found</div>} />
                </Switch>
              </CSSTransition>
            </TransitionGroup>
          </div>
        </div>
      )}
    />
  </Router>
)

codepen

https://codepen.io/ducafecat/pen/rvroYP

Ссылаться на

react-router
react-transition-group
code-splitting-in-create-react-app

Каталог этой серии

Быстрый старт React — 07 Интерфейсная маршрутизация

Цель

окружающая обстановка

0. Установить

1. Сначала запустите простой пример

2. Основное использование

2.1 BrowserRouterещеHashRouter

2.2 Компоненты<Route>Атрибутыexactполное совпадение

2.3 Компоненты<Route>Атрибутыstrictсовпадение завершающих косых черт

2.4 Компоненты<Link>

2.5 Компоненты<NavLink>

2.6 Компоненты<Switch>

2.7 Компоненты<Redirect>

2.8 Компоненты<Prompt>

3. Передача параметров

3.1 Написание определения маршрута

3.2 Напишите принимающий компонент

3.3 Полный пример

4. Нет соответствия

5. Вложенная маршрутизация

6. Пользовательская маршрутизация

6.1 Создать пользовательскийRoute

6.2 Использование пользовательских маршрутов

7. Анимация перехода

7.1 Установка

7.2 Написание анимацииcss

7.3 Импорт пакетов и стилей анимации

7.4 Стили письма

7.5 Написание навигации

7.6 Написание компонентов презентации

7.7 Написание компонентов контейнера

код

Ссылаться на

2.1 `BrowserRouter`еще`HashRouter`

2.2 Компоненты`<Route>`Атрибуты`exact`полное совпадение

2.3 Компоненты`<Route>`Атрибуты`strict`совпадение завершающих косых черт

2.4 Компоненты`<Link>`

2.5 Компоненты`<NavLink>`

2.6 Компоненты`<Switch>`

2.7 Компоненты`<Redirect>`

2.8 Компоненты`<Prompt>`

6.1 Создать пользовательский`Route`

7.2 Написание анимации`css`