Uso básico de react-router
1. El primer paso es, por supuesto, la instalación.
- Instalar usando npm
npm Install react-router-dom
- Instalar usando hilo
yarn add react-router-dom
2. El segundo paso es importar.
// 有两种url格式: BroswerRouter, 原型为h5的history模式, 路径中不带有`#`
// HashRouter ,使用hash模式, 路径中带有 `#`, 两者比较常用BroswerRouter.
import {
BroswerRouter as Router, Route, Link, NavLink } from 'react-router-dom'
- consejos: use
BroswerRouterla ruta que se vea más concisa y más parecida a una URL.vueEnrouter, establezcamode: ‘history’lo mismo (¡una recomendación particularmente excelente!)
3. El tercer paso es el uso.
- Uso de enrutador, enrutador, enlace:
import React, {
Component } from 'react';
import {
BrowserRouter, Route, Link } from 'react-router-dom';
import Home from './pages/home';
import About from './pages/about';
import Profile from './pages/profile';
export default class App extends React.Component {
render() {
return (
<BrowserRouter>
<Link to="/">首页</Link>
<Link to="/about">关于</Link>
<Link to="/profile">我的</Link>
// exact为精准配置, 只有路径完全一致, 才会跳转.
<Route exact path="/" component={
Home} />
<Route path="/about" component={
About} />
<Route path="/profile" component={
Profile} />
</BrowserRouter>
)
}
}
consejos: Router contiene: Link, Routelo que Linkrepresenta una ruta, Routerepresenta el componente correspondiente a la trayectoria, por lo que al hacer clic en el Linksalto a la página correspondiente.
- Uso de enrutador, ruta, NavLink:
import React, {
Component } from 'react';
import {
BrowserRouter, Route, Link } from 'react-router-dom';
import Home from './pages/home';
import About from './pages/about';
import Profile from './pages/profile';
export default class App extends React.Component {
render() {
return (
<BrowserRouter>
<NavLink to="/" activeStyle={
{
color: "red"}}>首页</NavLink>
<NavLink to="/about" activeStyle={
{
color: "red"}}>关于</NavLink>
<NavLink to="/profile" activeStyle={
{
color: "red"}}>我的</NavLink>
// exact为精准配置, 只有路径完全一致, 才会跳转.
<Route exact path="/" component={
Home} />
<Route path="/about" component={
About} />
<Route path="/profile" component={
Profile} />
</BrowserRouter>
)
}
}
consejos: en NavLinkcomparación con Linkmuchos atributos activeClassNamey activeStyle, la clase activada predeterminada de NavLink es active, si tiene miedo a la confusión, puede usar un nombre de clase personalizado
<NavLink to="/" activeStyle={
{
color: "red"}} activeClassName='link-active'>首页</NavLink>
consejos: si hace clic en cualquier ruta de descubrimiento activa, entonces debe agregar la /raíz para una coincidencia precisa.routeexact
- Interruptor 、 Enrutador 、 Ruta 、
import React, {
Component } from 'react';
import {
BrowserRouter, Route, Link } from 'react-router-dom';
import Home from './pages/home';
import About from './pages/about';
import Profile from './pages/profile';
export default class App extends React.Component {
render() {
return (
<BrowserRouter>
<NavLink to="/" activeStyle={
{
color: "red"}}>首页</NavLink>
<NavLink to="/about" activeStyle={
{
color: "red"}}>关于</NavLink>
<NavLink to="/profile" activeStyle={
{
color: "red"}}>我的</NavLink>
<Switch>
// 加上switch后, 匹配到第一个后, 就不会往后配置, 这样就不会出现, 有路径在其中就被渲染.
<Route exact path="/" component={
Home} />
<Route path="/about" component={
About} />
<Route path="/profile" component={
Profile} />
</Switch>
</BrowserRouter>
)
}
}
Sugerencias: Se Switchle agrega la etiqueta Routepara que coincida con la única Route.
Redirectuso de:
user.info ? show(userInfo): <Redirect to: '/login'>
consejos: si hay información de usuario, inicie sesión directamente; de lo contrario, vaya a la página de inicio de sesión para iniciar sesión.
多层路由:
// 挑战到cart购物车下的shopInfo商品信息页面
<Route path="/cart/shopInfo" component={
About} />
编程式路由:
// 页面中的跳转点击函数
<button onClick= {
this.toCart}>跳转到购物车</button>
// 函数中的跳转点击函数定义
toCart() {
// 这是跳转到cart, 保留当前页.
this.props.history.push('/cart')
//这是替换为cart, 当前页被cart替换了.
this.props.history.replace('/cart')
}