Различия между пакетами npm
Во-первых, начиная с npm-пакета react-router, есть соответственно react-router и react-router-dom.Разница между ними в том, что у последнего есть некоторые API-интерфейсы dom, такие как Link, BrowserRouter и HashRouter. Нетрудно обнаружить, что у react-router-dom есть некоторые API, необходимые для браузеров, в то время как у react-router есть только основные API, поэтому давайте подведем итоги.
- Пакет основных функций маршрутизации react-router
- react-router-dom для реактивной маршрутизации в браузерах
- React-маршрутизация, используемая react-router-native в приложении
И react-router-dom, и react-router-native наследуются от react-router, поэтому нам нужно только ввести react-router-dom для разработки в браузере.
Подробное объяснение API-интерфейса react-router-dom
Фреймворк, с которым я впервые столкнулся, был vue.Конфигурация маршрутизации в vue использует файлы конфигурации, в то время как react использует jsx для настройки маршрутизации, поэтому первое обучение будет немного неудобным.
HashRouter и BrowserRouter
По сути, это режимы хэширования и истории маршрутизации (если вы не понимаете разницу между этими двумя режимами, вам нужно это восполнить)
И эти два компонента являются контейнером маршрута и должны находиться в самом внешнем слое.
// hash模式
ReactDom.render(
<HashRouter>
<Route path="/" component={Home}/>
</HashRouter>
)
// history模式
ReactDom.render(
<BrowserRouter>
<Route path="/" component={Home}/>
</BrowserRouter>
)
Поговорим о параметрах HashRouter и BrowserRouter.
- Базовая ссылка маршрута basename используется для развертывания в некорневом каталоге. Например, если вам нужно развернуть проект на www.xxxx.com/web, установите basename="/web"
- getUserConfirmation используется для перехвата компонента Prompt и принятия решения о переходе
- forceRefresh используется для установки принудительного обновления всего браузера, значение по умолчанию — false
- keLength используется для установки длины location.key, по умолчанию 6, которую можно настроить
Prompt
Подсказка используется, чтобы подсказать пользователю, нужно ли переходить, а информация о подсказке для пользователя по умолчанию использует window.confirm, который можно комбинировать с getUserConfirmation для создания пользовательской информации о подсказке.
<Prompt message={location => {
return '请确认'
}}/>
如果直接返回true，则不会弹窗
Route
Маршрут - это исходный материал для маршрутизации, это компонент, который управляет отображением, соответствующим маршруту.
Параметры маршрута
- дорожка прыжка дорожка
- компонент соответствует компоненту, отображаемому путем
- Рендер может написать свою собственную функцию рендеринга, чтобы вернуть конкретный дом без установки компонента.
- location передает объект маршрута, сравнивает его с текущим объектом маршрута и переходит, если он совпадает
- точно соответствует правилу, когда оно истинно, оно точно соответствует правилу.
| path | url | Открыть ли | результат матча |
|---|---|---|---|
| /a | /a/b | false | yes |
| /a | /a/b | true | no |
- чувствительный Является ли путь чувствительным к регистру
| path | url | Открыть ли | результат матча |
|---|---|---|---|
| /a | /a | true | yes |
| /a | /A | true | yes |
- Соответствует ли strict следующему /
| path | url | Открыть ли | результат матча |
|---|---|---|---|
| /a | /a/ | true | yes |
| /a | /a/c | true | yes |
| /a | /a | true | no |
Router
Низкоуровневая маршрутизация, подходящая для любого компонента маршрутизации, в основном глубоко интегрированного с избыточностью, должна использоваться с объектом истории.
Целью использования маршрутизации маршрутизатора является синхронизация с библиотекой управления состоянием, такой как история в редуксе.
<Router history={history}>
...
</Router>
Ссылка и NavLink
Оба являются прыжковыми маршрутами, и NavLink имеет больше параметров.
API ссылки
- Существует два способа записи, указывающих, по какому маршруту перейти.
- Строковая запись
<Link to="/a"/> - Обозначение объекта
<Link to={{ pathname: '/courses', search: '?sort=name', hash: '#the-hash', state: { fromDashboard: true } }}/>
- Строковая запись
- заменить, чтобы изменить нажмите, чтобы заменить
- innerRef обращается к dom тега Link
API NavLink
- Связать все API
- activeClassName Имя класса, установленное при активации маршрута.
- стиль настройки активации маршрута activeStyle
- точно относится к маршруту, активный класс будет активирован только при выполнении этого условия
- strict Обратитесь к маршруту, активный класс будет активирован только при выполнении этого условия
- isActive получает callback-функцию, которая срабатывает при изменении активного состояния и прерывает прыжок, если возвращает false
const oddEvent = (match, location) => {
console.log(match,location)
if (!match) {
return false
}
console.log(match.id)
return true
}
<NavLink isActive={oddEvent} to="/a/123">组件一</NavLink>
- location получает объект местоположения, и он будет переходить, когда URL-адрес удовлетворяет условиям этого объекта.
<NavLink to="/a/123" location={{ key:"mb5wu3", pathname:"/a/123" }}/>
Redirect
Перенаправление перенаправления очень простое, мы можем просто посмотреть код напрямую
// 基本的重定向
<Redirect to="/somewhere/else" />
// 对象形式
<Redirect
to={{
pathname: "/login",
search: "?utm=your+face",
state: { referrer: currentLocation }
}}
/>
// 采用push生成新的记录
<Redirect push to="/somewhere/else" />
// 配合Switch组件使用，form表示重定向之前的路径，如果匹配则重定向，不匹配则不重定向
<Switch>
<Redirect from='/old-path' to='/new-path'/>
<Route path='/new-path' component={Place}/>
</Switch>
Switch
Переключение маршрута будет соответствовать только первому маршруту, который можно представить в виде панели вкладок.
Switch может содержать только Route, Redirect и Router
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>
</Switch>
withRouter
Когда немаршрутизирующий компонент также хочет получить доступ к объектам сопоставления, местоположения и истории текущего маршрута, тогда withRouter будет очень хорошим выбором, который можно понимать как обертывание компонента в компонент маршрутизации.
import { withRouter } from 'react-router-dom'
const MyComponent = (props) => {
const { match, location, history } = this.props
return (
<div>{props.location.pathname}</div>
)
}
const FirstTest = withRouter(MyComponent);
объект истории
Любой, кто использовал vue, знает, что vue-router имеет навигацию по компонентам и программную навигацию.Как react-router использует API для управления вперед, назад и обновлением? Это требует от нас объяснения роли объекта истории.
Фактически, в каждом компоненте маршрутизации мы можем использовать this.props.history, чтобы получить объект истории, или мы можем использовать withRouter, чтобы обернуть компонент, чтобы получить его.
Методы push, replace, go и другие инкапсулированы в историю, детали таковы:
History {
length: number;
action: Action;
location: Location;
push(path: Path, state?: LocationState): void; // 调用push前进到一个地址,可以接受一个state对象，就是自定义的路由数据
push(location: LocationDescriptorObject): void; // 接受一个location的描述对象
replace(path: Path, state?: LocationState): void; // 用页面替换当前的路径，不可再goBack
replace(location: LocationDescriptorObject): void; // 同上
go(n: number): void; // 往前走多少也页面
goBack(): void; // 返回一个页面
goForward(): void; // 前进一个页面
block(prompt?: boolean | string | TransitionPromptHook): UnregisterCallback;
listen(listener: LocationListener): UnregisterCallback;
createHref(location: LocationDescriptorObject): Href;
}
Таким образом, если мы хотим использовать API для работы вперед и назад, мы можем вызывать методы в истории.