React路由的安装与使用

安装

安装版本为5.0

npm i react-router-dom@5.0 -S

导入路由相关组件

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.路由传参

import { HashRouter as Router, Route, NavLink } from 'react-router-dom'
function App() {
    return (<Router>
        <NavLink to="/details/abc">参数abc</NavLink> |
        <NavLink to="/details/123">参数123</NavLink> |
        <Route path="/details/:id" component={Details}></Route>
    </Router>);
}
export default App;
function Details({ match, location }) {
    return (<div>
        <h1>路由传参</h1>
        <p>参数：{match.params.id}</p>
    </div>);
}

3.子路由

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.路由守卫

// 把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>

404页面

<Switch>
    <Route path="/" component={Home} exact></Route>
    <Route path="/about" component={About}></Route>
    {/*匹配任意路径*/}
    <Route path="*" component={NoMatch}></Route>
</Switch>

//404页面
function NoMatch({ location }) {
    return (<div>
        <h3>404</h3>
        <p>当前地址找不到：{location.pathname}</p>
        <NavLink to="/">首页</NavLink>
    </div>)
}

效果如下：

 欲知后事如何，请听下回分解. . . . . .