React路由知识总结

一、使用步骤

1.安装

2.导入

二、路由案例

1.普通路由

2.路由传参

3.子路由

4.404页面

5.路由守卫

三、路由组件解释

四、路由props

---

 

一、使用步骤

1.安装

 安装版本为5.0

npm i react-router-dom@5.0 -S

2.导入

import {
  HashRouter as Router,//HashRouter哈希路由 as起别名 router路由
  Route,//router 存放路由的容器
  NavLink,//navlink 导航链接
  Redirect,// Redirect 重定向
  Switch,// Switch一次匹配一个页面
} from "react-router-dom";

二、路由案例

1.普通路由

import {
  HashRouter as Router,
  Route,
  NavLink
} from "react-router-dom";
function App() {
  return (
    <Router>
      <div className="nav">
        <NavLink to="/" exact>首页</NavLink>|
        <NavLink to="/about">关于</NavLink>
      </div>
      <div className="views">
          <Route path="/" component={Home} exact></Route>
          <Route path="/about" component={About}></Route>
      </div>
    </Router>
  );
}

export default App;

function Home() {
  return (
    <div>
      <h1>首页</h1>
    </div>
  );
}

function About() {
  return (
    <div>
      <h1>关于页面</h1>
    </div>
  );
}

 运行结果：

 

2.路由传参

<NavLink to="/details/abc">详情abc</NavLink>|

<Route path="/details/:id" component={Details}></Route>

 获取参数：

function Details({ match }) {
  return (
    <div>
      <h1>详情页面</h1>
      <p>参数：{match.params.id}</p>
      <p>match:{JSON.stringify(match)}</p>
    </div>
  );
}

3.子路由

 父路由Admin是普通路由，在父组件中配置子路由

在子路由中配置重定向Redirect，可控制子路由默认显示页面

function Admin() {
  return (
    <div>
      <h1>Admin页面</h1>
      <p>
        <NavLink to="/admin/dash">概述</NavLink>
        <NavLink to="/admin/orderlist">订单列表</NavLink>
      </p>
      <Route path="/admin/dash" component={Dash}></Route>
      <Route path="/admin/orderlist" component={OrderList}></Route>
      <Redirect from="/admin" to="/admin/dash"></Redirect>
    </div>
  );
}

4.404页面

 * 匹配任意地址，将404页面放在最后，并在外层加上<Switch>组件控制只匹配一个页面。当无其他页面匹配时即显示404页面

      <div className="views">
        <Switch>
          <Route path="/" component={Home} exact></Route>
          <Route path="/about" component={About}></Route>
          <Route path="/details/:id" component={Details}></Route>
          <Route path="/admin" component={Admin}></Route>
          <Route path="*" component={NoMatch}></Route>
        </Switch>
      </div>

5.路由守卫

 如果获取本地存储isLog得到了(登陆了)，返回children 子节点Admin,否则返回一个Redirect组件
 Redirect 默认跳转到 /login登录页面 传入一个state数据:redirect自定义值 location.pathname(本来要跳转的地址)

// 把props.chilren 解构诶children ...rest 剩余的其他参数
function Private({ children, ...rest }) {
  // 把Private组件的参数除了children全部转移到Route组件
  // Route不直接指定component通过render渲染出来
  return (
    <Route
      {...rest}
      render={({ location }) => {
        return localStorage.getItem("isLog") ? (
          children
        ) : (
          <Redirect
            to={{ pathname: "/login", state: { redirect: location.pathname } }}
          ></Redirect>
        );
      }}
    ></Route>
  );
}

 使用时，给要守卫的页面添加父组件<Priviate>

<Priviate path="/admin">
    <Admin></Admin>
</Priviate>

三、路由组件解释

HashRouter as Router 哈希路由

BrowserRouter as Router 浏览器路由

Route 存放路由的页面：path 路径、component 组件、render渲染

NavLink 导航链接：to 链接地址、exact 精确匹配、匹配的链接会自动添加 class active

Link 链接：to 链接地址、exact 精确匹配

Redirect 重定向：to 重定向到、from 从

Switch 一次只匹配一个路由

四、路由props

match

 

• path 路径
• url 地址
• isExact 精确匹配
• params 参数

history

• go 跳转
• goBack 返回
• goForward 前进
• push 跳转
• replace 替换
• listen 监听

location

• pathname 路径地址
•  search 查询
• hash 哈希
• state 状态

      <NavLink
        to={{
          pathname: "/details/abc",
          search: "name=mewow&age=18",
          hash: "person",
          state: { redirect: "/about" },
        }}
      >
        详情abc
      </NavLink>

---

更详细文档可见官网👇

React Router: Declarative Routing for React.jshttps://v5.reactrouter.com/web/guides/quick-start