Сначала кратко объясните несколько слов
Для тех, кто никогда не был в контакте сReact RouterДля студентов , обязательно обратите внимание: последняя версия React RouterV5. Кроме тогоV2 V3 V4Версия. Использование и концепции версий V4 и V5 в основном одинаковы, но они сильно отличаются от предыдущих версий V2 и V3.
Поэтому, прежде чем учиться, обязательно выясните, какую версию вы используете.Если это V4 или V5, вы можете обратиться к примечаниям к документам обеих версий V4 и V5, если вы используете V2 или V3, то вы должны найти соответствующий Примечания к документу.
Когда я изучал React Router, я использовал V5, так что это замечание тоже верноReact Router V5некоторые резюме. Если вы новичок в React, я думаю, что в этой заметке вы можете использовать React Router. Если вы хотите глубже понять React Router, вы можете посетить:реагировать-обучение.com/реагировать-маршрут….
Во-вторых, основное использование React Router
1. Установка
В версиях V4 и V5 React Router разделен на два основных направления: React Web Router и React Native Router. Если вы создаете веб-приложение React, используйте React Web Router, здесь мы используем этот маршрутизатор, поэтому выполните следующую команду для установки:
npm install --save react-router-dom
2. Настройте маршрутизацию в проекте React
Чтобы использовать маршрутизацию в проекте React, есть два основных компонента:BrowserRouterа такжеRoute. В проекте React импортируйте эти два компонента с помощью следующих команд:
import { BrowserRouter, Route } from "react-router-dom";
Компонент BrowserRouter — это ядро React Router, а компонент Route — это конкретная конфигурация React Router. Например: Компонент BrowserRouter похож на коробку с канцелярскими принадлежностями, а компонент Route — на канцелярскую бумагу, которую нужно положить в эту коробку. Таким образом, когда мы используем канцелярские принадлежности, нам нужно только открыть коробку для канцелярских принадлежностей и вынуть ее изнутри.
Зная эту связь, мы можем настроить маршрутизацию в React.Конфигурация очень проста.Пример кода выглядит следующим образом:
// React 应用中的 App.js 文件
import React from 'react';
import { BrowserRouter, Route } from 'react-router-dom'
import Set from './views/set/Set'
import Help from './views/help/Help'
class App extends React.Component {
render() {
return (
<BrowserRouter>
<Route path="/help" component={Help} />
<Route path="/set" component={Set} />
</BrowserRouter>
);
}
}
export default App;
После настройки автомобиля в файле App.js, затем в файле ввода React (обычно это файл index.js) импортируйте файл App.js и смонтируйте его на странице Пример кода выглядит следующим образом:
// React 应用中的入口文件 index.js
import React from 'react'
import { render } from 'react-dom'
import App from './App'
render((
<App />
), document.getElementById('root'))
После того, как монтирование будет завершено, пройдитеnpm run startПосле того, как команда запустит локальный сервер разработки, мы сможем получить доступ к нашему проекту React через route. Примеры следующие:
Кратко представим правила конфигурации маршрутизации в приведенном выше коде на примере этой конфигурации маршрутизации:
<Route path="/help" component={Help} />
HelpЭто компонент React, который мы определили ранее Код определения этого компонента выглядит следующим образом:
import React, { Component } from 'react'
class Help extends Component {
render() {
return (
<div className="help-box">
帮助与反馈 - 页面
</div>
);
}
}
export default Help;
Когда мы набираем в адресной строке браузераhttp://localhost:3000/help, React Router будет соответствовать<Route path="/help" component={Help} />Эта запись затем отобразит соответствующий компонент в текущем местоположении.
Обратите внимание, что это текущая позиция, проще говоря: замените код в компоненте справки на<Route path="/help" component={Help} />код, а затем визуализировать компонент, соответствующий маршруту. Это будет объяснено более подробно позже.
3. Перейти по ссылке в React
Благодаря приведенной выше конфигурации мы уже можем перейти к маршруту, введя URL-адрес, но в большинстве случаев мы надеемся перейти к маршруту, щелкнув ссылку на странице, как в следующем примере:
Для этого нам достаточно ввестиLinkЭтот компонент может быть, конкретный код выглядит следующим образом:
// React 应用中的 App.js 文件
import React from 'react';
import { BrowserRouter, Route, Link } from 'react-router-dom' // 引入 Link 组件
import Set from './views/set/Set'
import Help from './views/help/Help'
class App extends React.Component {
render() {
return (
<BrowserRouter>
{/* 注意 Link 组件一定要位于 BrowserRouter 组件中 */}
<ul>
<li><Link to="/help">Help</Link></li>
<li><Link to="/set">Set</Link></li>
</ul>
<Route path="/help" component={Help} />
<Route path="/set" component={Set} />
</BrowserRouter>
);
}
}
export default App;
3. Расширенное использование React Router
Теперь мы освоили базовое использование React Router, но знаний, которые у нас есть на данный момент, недостаточно, чтобы использовать его умело, поэтому давайте познакомимся с React Router подробнее.
1. Правила сопоставления маршрутов
При настройке маршрута мы можем передать следующие параметры:путь, точный, компонент, визуализация, дети. Эти параметры необязательны, то есть у нас есть много способов настроить Route, общие из них следующие:
<BrowserRouter>
<Route component={Wallet} />
<Route path="/" component={Index} />
<Route exact path="/" component={Index} />
<Route path="/help" component={Help} />
<Route path="/render" render={ () => { return <h1>我是匹配到的路由</h1> } } />
</BrowserRouter>
Вот методы настройки пяти вышеуказанных маршрутов:
-
<Route component={Wallet} />Не указывается при настройке маршрутаpathатрибут, пока вы открываете проект, независимо от того, какой маршрут вы посещаете, этот маршрут будет совпадать.
-
<Route path="/" component={Index} />При настройке маршрута укажите
path="/", тот же эффект, что и в приведенной выше конфигурации, пока вы открываете проект, независимо от того, какой маршрут вы посещаете, этот маршрут будет совпадать. С этой конфигурацией мы становимся"нестрогое совпадение", любой путь, к которому вы обращаетесь в проекте, будет содержатьpath="/"маршрут из. Таким образом, независимо от того, к какому маршруту осуществляется доступ, этот маршрут будет совпадать. -
<Route exact path="/" component={Index} />В отличие от описанного выше метода настройки, здесь при настройке маршрута входящийexactАтрибут, эта конфигурация"строгое соответствие", этот маршрут будет сопоставлен только тогда, когда мы посетим корневой путь проекта. Например: локальный: 3000/ .
-
<Route path="/help" component={Help} />Очень традиционный метод конфигурации маршрута.Когда мы обращаемся к пути «/help», мы сопоставляем этот маршрут, а затем визуализируем соответствующий компонент.
-
<Route path="/render" render={ () => { return <h1>我是匹配到的路由</h1> } } />Отличие от предыдущей конфигурации роутинга в том, что здесь нет атрибута компонента, а заменен атрибут рендеринга. Это свойство является функцией. При совпадении этого маршрута страница будет отображать содержимое, возвращаемое этой функцией.
2. Использование компонентов Switch
Использование компонента Switch на самом деле очень простое, например, если компонент BrowserRouter — это большая коробка с канцелярскими принадлежностями, то компонент Switch — это маленькая сумка в этой большой коробке с канцелярскими принадлежностями, а компонент Route — это карандаш в этой маленькой сумке. Когда нам понадобится карандаш, просто возьмите один из этого маленького мешочка. Примечание. Вы можете взять не более одного карандаша.
Другими словами, при сопоставлении маршрутов после сопоставления маршрута в компоненте коммутатора он больше не будет соответствовать. Например следующий пример:
<BrowserRouter>
<Switch>
<Route component={Wallet} />
<Route path="/" component={Index} />
<Route path="/help" component={Help} />
<Route path="/render" render={() => { return <h1>我是匹配到的路由</h1> }} />
</Switch>
</BrowserRouter>
Если мы перейдем по пути «localhost: 3000/help», несмотря на то, что все первые три маршрута совпадают, страница отобразит только первый соответствующий маршрут, а остальные будут проигнорированы. Увидев это, вы можете спросить, а что делает этот компонент? Это может сыграть роль в следующих сценариях: если текущий путь не соответствует ни одному маршруту, маршрут переходит к404страницу, то вы можете написать:
<BrowserRouter>
<Switch>
<Route path="/set" component={Set} />
<Route path="/help" component={Help} />
<Route path="/render" render={() => { return <h1>我是匹配到的路由</h1> }} />
<Route component={NotFound} />
</Switch>
</BrowserRouter>
В приведенной выше конфигурации, если текущий путь имеет маршрут, отличный от последнего, будет отображаться соответствующее содержимое, и сопоставление не будет продолжаться; если нет другого маршрута, кроме последнего, будет отображаться последний маршрут, потому что этот маршрут может соответствовать любому пути. Вы можете сопоставить этот маршрут с404страница.
3. Как сопоставленный маршрут отображает контент
Конфигурация и правила сопоставления маршрута описаны ранее, давайте поговорим о том, как отображать соответствующий контент, когда маршрут совпадает с маршрутом.
упоминалось ранее:Текущее местоположениеОтрисовывая контент, некоторые новички могут не сразу понять, что такое текущая позиция. Итак, давайте возьмем пример, скажем, у нас есть следующий код конфигурации в компоненте App.js проекта:
class App extends React.Component {
render() {
return (
<div className="content">
<BrowserRouter>
<Route exact path="/" component={Index} /> {/* 位置 A */}
<Route path="/help" component={Help} /> {/* 位置 B */}
<Route path="/set" component={Set} /> {/* 位置 C */}
</BrowserRouter>
</div>
);
}
}
Затем, когда путь будет «помощь», будет сопоставлен второй маршрут, а затем React Router будет впозиция БСоответствующая строка заменяет компонент Route на компонент Help, а другие несоответствующие маршруты будут заменены на null, что эквивалентно непосредственному удалению этих компонентов Route. Окончательный результат показан в следующем коде:
// Help 组件的定义代码可以在上文中找到
class App extends React.Component {
render() {
return (
<div className="content">
<div className="help-box">
帮助与反馈 - 页面
</div>
</div>
);
}
}
Причина, по которой я говорю о такой точке знаний, заключается в том, чтобы подготовиться к ознакомлению с тем, как настроить вложенную маршрутизацию позже.Это может быть упомянуто здесь в первую очередь: если мы хотимв компоненте АВложите несколько подмаршрутов, затем вы можете настроить эти маршруты и записать их в компонент А. Как только маршруты совпадут с этими маршрутами, компоненты, соответствующие подмаршрутам, будут отображаться в соответствующих позициях в компоненте А. Не беда, если вы не понимаете, позже будет подробное объяснение.
4. Небольшое объяснение React Router
Из приведенных выше заметок вы можете подумать: компонент Route должен находиться в компоненте BrowserRouter, и эти два компонента должны находиться в одном и том же файле.
На самом деле это не так.С точки зрения структуры кода компонент Route должен находиться в компоненте BrowserRouter, но два компонента не обязательно должны быть в одном файле.Поскольку два компонента упакованы и скомпилированы, Компонент маршрута может быть расположен в компоненте BrowserRouter. Например, следующее также совершенно верно:
// 项目的入口文件 index.js
import React from 'react'
import { render } from 'react-dom'
import App from './App'
import { BrowserRouter } from 'react-router-dom'
render((
<BrowserRouter>
<App />
</BrowserRouter>
), document.getElementById('root'))
// App.js 文件
import React from 'react';
import { Route, NavLink } from 'react-router-dom'
import Set from './views/set/Set'
import Help from './views/help/Help'
import Index from './views/index/Index'
import Wallet from './views/wallet/Wallet'
class App extends React.Component {
render() {
return (
{/* 注意这里已经没有了 BrowserRouter 组件 */}
<div className="content">
<ul>
<NavLink activeClassName="selected" to="help">help</NavLink >
<NavLink activeClassName="selected" to="index">index</NavLink >
<NavLink activeClassName="selected" to="wallet">wallet</NavLink >
<NavLink activeClassName="selected" to="set">set</NavLink >
</ul>
<Route path="/help" component={Help} />
<Route path="/index" component={Index} />
<Route path="/wallet" component={Wallet} />
<Route path="/set" component={Set} />
</div>
);
}
}
export default App;
5. Как настроить вложенные маршруты
Вложенная маршрутизация, как следует из названия, предназначена для настройки некоторых маршрутов на странице, соответствующих основному маршруту.Сейчас мы опишем, как использовать React Router для настройки вложенных маршрутов.После завершения настройки мы увидим следующие эффекты:
На основе предыдущего мы уже настроили роутинг первого уровня, то есть можем кликать через таможнюsetКнопка переходит к компоненту, соответствующему совпадающему маршруту, то есть к компоненту «Установить».Для конкретной конфигурации см. код в предыдущем блоке кода.
Далее нам нужно настроить вторичную маршрутизацию в компоненте Set, то есть вложенную маршрутизацию. Конфигурация очень простая, вот непосредственно код:
import React, { Component } from 'react'
import { Route, Link } from 'react-router-dom'
import SetSystem from '../SetSystem'
import SetPerson from '../SetPerson'
import SetTime from '../SetTime'
import './Set.scss'
class Set extends Component {
componentDidMount() {
// 当前页面匹配到的路径，这里是"/set"
// 使用这个路径，配置Route和Link
console.log(this.props.match.path);
}
render() {
return (
<div className="set-box">
个人设置 - 页面
<div className="link-list">
<Link to={`${this.props.match.path}/system`}>system</Link>
<Link to={`${this.props.match.path}/person`}>person</Link>
<Link to={`${this.props.match.path}/time`}>time</Link>
</div>
<div className="child-router">
<Route path={`${this.props.match.path}/system`} component={SetSystem} />
<Route path={`${this.props.match.path}/person`} component={SetPerson} />
<Route path={`${this.props.match.path}/time`} component={SetTime} />
</div>
</div>
);
}
}
export default Set;
Обратите внимание, что в коде, который мы ввелиSet.scssФайл стиля добавляет несколько очень простых стилей к элементам страницы. Вы можете настроить определенные стили. Пример кода здесь выглядит следующим образом:
.set-box {
.link-list {
a {
margin: 0px 10px;
}
}
}
После написания кода настраиваем вложенную маршрутизацию, запускаем проект и можно увидеть эффект, показанный на гифке выше. Вот краткое объяснение приведенной выше конфигурации:
Прежде всего, позвольте мне еще раз отметить: совпадающий маршрут будет вТекущее местоположениеВизуализировать совпадающий контент (этот контент может быть компонентом компонента, результатом, возвращаемым функцией рендеринга, и т. д.).
Именно из-за этой особенности React Router мы можем настраивать вложенные маршруты, иначе Маршрут сопоставляется по времени, но мы не знаем места его отрисовки, и реализовать эту функцию мы не можем.
Далее, скажи это сноваthis.props.matchЭто свойство, через это свойство мы можем получить текущую страницу, то есть путь, соответствующий компоненту, совпадающему с маршрутом первого уровня, здесьthis.props.matchЗначение "/set".
Зная это, мы можемthis.props.matchС помощью задайте путь вторичного маршрута. Таким образом, следующие два способа написания эквивалентны, но первый способ более гибкий:
{/* 第一种写法 */}
<Link to={`${this.props.match.path}/system`}>system</Link>
<Route path={`${this.props.match.path}/system`} component={SetSystem} />
{/* 第二种写法 */}
<Link to="/set/system">system</Link>
<Route path="/set/system" component={SetSystem} />
Наконец, скажи это сноваКомпонент маршрутаа такжеКомпонент BrowserRouterвопрос о местоположении. Сяобай, который плохо знаком с React Router, может спросить: Почему при настройке вложенных маршрутов компонент Route не включен в компонент BrowserRouter?
Фактически, после использования webpack для упаковки и компиляции кода компонент Route уже включен в компонент BrowserRouter. На уровне кода мы можем понять это так: компонент Route содержится в компоненте Set, компонент Set содержится в компоненте App, а компонент App содержится в BrowserRouter. Таким образом, компонент Route уже включен в компонент BrowserRouter.
В-четвертых, напишите в конце
Я закончил писать краткий обзор React Router.Контента много, но он очень простой. Надеюсь, он поможет новичкам, которые только начинают.
Если великие боги видят ошибки, я надеюсь, ты сможешь вовремя их исправить.