react 路由 v6 路由跳转和路由嵌套

1. 路由环境配置

react-router-dom 版本要在 v6 以上

1. 安装依赖

npm install react-router-dom -S

2. 在入口 index.js 引入，并使用路由模式组件包裹根组件
   根据需求选择 HashRouter 还是 BrowserRouter，默认是 BrowserRouter

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

ReactDOM.render(
  
    
  ,
  document.getElementById("root")
);

注意：

路由模式
hash 模式： HashRouter
histroy 模式： BrowserRouter
其中 hash 模式 url 路径上显示 # ，histroy 模式需要后端配合配置

2. 路由跳转的几种方式

1. Link、NavLink

在 App.js 中，通过 Link 或者 NavLink 组件，进行导航跳转

import React from "react";
import { Link, Route, Routes } from "react-router-dom";
import Child1 from "./components/Child1";
import Child2 from "./components/Child2";
function App(props) {
  console.log(props);
  return (
    

      

        {/* link 导航 */}
        {/* 也使用 NavLink，相比link 它多了一个点击时的 active 类，可以设置点击时样式 */}
        Link: go to child1 |{" "}
        Link: go to child2
      
      

        {/* 定义路由出口 */}
        
          {/* 根组件默认展示 */}
          {/* } /> */}
          {/* 路由重定向 */}
          } />

          } />
          } />
        
      
    
  );
}

export default App;

2. navigate() 路由跳转

在 App.js 中，通过 react-router-dom 中的 useNavigate() 方法，进行编程式导航跳转
注意：withRouter 在 react-router-dom v6 版本中已被弃用

import React from "react";
import { Route, Routes, useNavigate } from "react-router-dom";
import Child1 from "./components/Child1";
import Child2 from "./components/Child2";
function App() {
  const navigate = useNavigate();
  return (
    

      

        {/* 编程式导航导航 */}
         {
            navigate("/child1");
          }}
        >
          onClick: go to child1
        
         {
            navigate("/child2");
          }}
        >
          onClick: go to child2
        
      
      

        {/* 定义路由出口 */}
        
          {/* 根组件默认展示 */}
          {/* } /> */}
          {/* 路由重定向 */}
          } />

          } />
          } />
        
      
    
  );
}

export default App;

3. navigate(path,{replace: true}) 路由跳转，清除历史记录

此方式跳转会删除历史记录，使用和传参方式和 navigate() 相同，只是增加 {replace: true}参数
Link组件也可以使用 replace 方式，只需要在Link标签上添加 replace 属性即可

navigate('/child1/child1B',{replace: true})

4. navigate(num) 路由跳转，前进、后退

// 历史记录 前进
navigate(1)

// 历史记录 后退
navigate(-1)

// 历史记录 后退两步
navigate(-2)

3. 嵌套路由

方式一：分离式

1. 配置一级路由结构

   在一级路由 App.js 中，拥有子路由的路由需要在 path 最后加上 /*

import React from "react";
import { Link, Route, Routes, Navigate } from "react-router-dom";
import Child1 from "./components/Child1";
import Child2 from "./components/Child2";
function App(props) {
  console.log(props);
  return (
    

      

        Link: go to child1 |{" "}
        Link: go to child2
      
      

        {/* 定义路由出口 */}
        
          {/* 根组件默认展示 */}
          {/* } /> */}
          {/* 路由重定向 */}
          } />

          } />
          } />
        
      
    
  );
}

export default App;

2. 配置子路由结构
   在 Child1.js 中，link 标签中要写全路径，路由出口的 path 中只写路由名称

import React, { Component } from "react";
import { Link, Route, Routes } from "react-router-dom";
import Child1A from "./Child1A";
import Child1B from "./Child1B";

export default class Child1 extends Component {
  render() {
    return (
      

        

          Link: go to Child1A |{" "}
          Link: go to Child1B
        
        

          {/* 定义路由出口 */}
          
       
            {/* 路由重定向 */}
            {/* } /> */}
            {/* 根组件默认展示 */}
            } />

            } />
            } />            
          
        
      
    );
  }
}

方式二：集合式

1. 配置嵌套路由结构
   在 App.js 中，以 Route 组件嵌套的方式配置嵌套路由结构

import React from "react";
import { Link, Route, Routes, Navigate } from "react-router-dom";
import Child1 from "./components/Child1";
import Child2 from "./components/Child2";
import Child1A from "./components/Child1A";
import Child1B from "./components/Child1B";
function App() {
  return (
    

      

        Link: go to child1 |{" "}
        Link: go to child2
      
      

        {/* 定义路由出口 */}
        
          } />
          }>
            } />
            } />
          
          } />
        
      
    
  );
}

export default App;

2. 定义子子路由出口
   在 Child1.js 中，引入 Outlet 并定义出口位置

import React, { Component } from "react";
import { Link, Outlet } from "react-router-dom";

export default class Child1 extends Component {
  render() {
    return (
      

        

          Link: go to Child1A |{" "}
          Link: go to Child1B
        
        

          {" "}
          
        
      
    );
  }
}