React基础知识三 router路由全指南

现在最新版本是Router6和Router5有比较大的变化，Router5和Router4变化不大，本文以Router6的写法为主，也会对比和Router5的不同。比较全面。

安装路由

npm i react-router-dom

基本使用

有两种Router，BrowserRouter和HashRouter，选哪个都可以，这里以HashRouter为例子，BrowserRouter用法上没什么区别。

先给App组件套上一层Router，这样就可以使用路由功能了。

import {
    BrowserRouter, HashRouter } from "react-router-dom";

root.render(
  <React.StrictMode>
  <HashRouter>
    <App />
  </HashRouter>
 </React.StrictMode>
);
或者
root.render(
  <React.StrictMode>
  <BrowserRouter>
    <App />
  </BrowserRouter>
 </React.StrictMode>
);

在App里面我们需要定义一个Routes组件，以及他的子组件Route，Route会将path映射成对应的组件。也就是动态加载我们的Home或者About组件。

import {
    Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

function App() {
   
  return (
    <div className="App">
      <div>Header</div>
      <div>
        <Routes>
          <Route path="/home" element={
   <Home />} />
          <Route path="/about" element={
   <About />} />
        </Routes>
      </div>
      <div>Footer</div>
    </div>
  );
}

export default App;

Home和About就展示文本

import React from "react";
class Home extends React.PureComponent {
   
  render() {
   
    return <div>Home Page</div>;
  }
}
export default Home;

在浏览器中输入路径，注意我们使用的是HashRouter，所以路径前面需要加#号。

http://localhost:3001/#/home

效果就是Home组件的内容确实被动态加载了。

使用Link组件实现点击切换

上面的代码可以使用浏览器输入路径动态的切换内容。但一般用户不会直接在浏览器输入地址。一般我们会给个导航栏让用户点击，这个功能用Link就可以很容易实现。

Link内容直接写显示的文本，以及一个to属性用于指定路径，和Route的path属性对应上就可以了。

import {
    Routes, Route, Link } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";

function App() {
   
  return (
    <div className="App">
      <div>
        <Link to="/home">首页</Link>
        <Link to="/about">关于</Link>
      </div>
      <div>
        <Routes>
          <Route path="/home" element={
   <Home />} />
          <Route path="/about" element={
   <About />} />
        </Routes>
      </div>
      <div>Footer</div>
    </div>
  );
}

export default App;

这样，就可以通过Link组件实现点击动态切换路由内容了。

404页面

当所有的路径都匹配不到的时候，就匹配到了*。

<Route path="/home" element={
   <Home />} />
<Route path="/about" element={
   <About />} />
<Route path="/login" element={
   <Login />} />
<Route path="*" element={
   <NotFound />} />

Link的一些额外属性

• replace 是否重定向，默认false
• reloadDocument 是否出现加载文档，会导致填的数据丢失,默认false
• state 可以传值，在目标组件使用useLocation可以获取到值。

<Link to="/home" replace={
   false} reloadDocument={
   false} state={
   {
   name:"Tom"}}>

NavLink的使用（了解）

NavLink可以使链接样式有一些变化。但实际上我们是很少使用的，因为我们一般都自定义。作为了解就可以了。
当我们把Home组件的Link替换成NavLink的时候，当Home组件的NavLink被点击的时候，我们查看源代码，发现，a元素上面多了一个active的class。但NavLink被点击的时候，我们可以通过这个active class来做一些样式上的变化。

我们直接定义一个class，在组件里面引入，在点击的时候就会触发这个效果了。

.active {
   
  color: red;
  font-size: 20px;
}

支持下面的写法，函数参数是arguments，我们可以解构出isActive ，这是这个组件提供的。

        <NavLink
          to="/home"
          style={
   ({
    isActive }) => ({
    color: isActive ? "red" : "green" })}
        >
          首页
        </NavLink>