持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第26天，点击查看活动详情

路由跳转模式

前面使用Link和NavLink组件进行路由跳转的时候没有讲到路由跳转的功能。其实默认的都是push模式，每次跳转都会记录访问历史，可以用浏览器的回退箭头按钮进行回退：

另外一个种跳转形式就叫replace模式，原地跳转不会留下痕迹。这种一般不常见，一般用在退出登录或者有某些场景下或者有些BUG的情况下，使用默认的push或a标签跳转可能会产生死循环，为了避免这种情况出现，所以推荐使用replace模式

使用replace模式的路由跳转一般使用Navigate组件跳转，前面就是使用它来进行重定向。

代码

pages文件加下新建一个Index文件夹做一个名为Index路由组件，做一个路由点击导航： index.js:

import React from 'react'
import { useNavigate } from 'react-router-dom'
export default function Messages() {

    const navigate = useNavigate()

    const pushShow = () => {
        navigate(`/home`)
    }

    const replaceShow = (i) => {
        navigate(`/about`,{replace:true})
    }
    return (
        <div>
            <ul>
                <button onClick={() => pushShow()}>push跳转Home</button>
                <button onClick={() => replaceShow()}>replace跳转About</button>
            </ul>
        </div>
    )
}

这里在Index路由组件做了两个按钮分别以不同的方式进行跳转。然后在App.js中直接显示这个路由组件。 App.js:

import Home from './pages/Home'
import About from './pages/About'
import Index from './pages/Index'
import { NavLink, Route, Routes, Navigate  } from 'react-router-dom'
import './App.css'


function App() {

	return (
		<div>
			<div >
			<NavLink className={({ isActive }) => "list-group-item" + (isActive ? " " : "mactive")} to="/index" >
					Index
				</NavLink>
				<NavLink className={({ isActive }) => "list-group-item" + (isActive ? " " : "mactive")} to="/home" >
					home
				</NavLink>&nbsp;
				<NavLink className={({ isActive }) => "list-group-item" + (isActive ? " " : "mactive")} to="/about" >
					About
				</NavLink>
			</div>

			<Routes>
			<Route  replace path="/index"element={<Index />}  />
				<Route replace path="/home" element={<Home />}  />
				<Route  replace path="/about"element={<About />}  />

				<Route path="/" element={<Navigate to="/index"  replace  />} />
	
			</Routes>

		</div>
	);
}
export default App;

Home和About路由组件只做简单的信息显示 当前目录：

实现效果：

测试了两种方法进行了路由跳转， useNavigate和之前的路由跳转传参都是React的Hook函数，什么是Hook函数我们后面才会了解到。

在navigate函数中，增加了{replace:true}对象就使用了replace方法回退直接会回到了原始页面，没有留下痕迹，同样也可以在这个函数在组件之间中传递参数。

编程式路由跳转

编程式路由跳转用代码控制路由前进后退，这里又要用到React的Hook函数useNavigate，在新版本种又废弃了之前的useHistory跳转，旧版本种使用history.push或者history.replace跳转。在新版本的useNavigate使用navigate.go(1)和navigate.go(-1)进行跳转，非常简单，我自己在App.js中实现了：

import Home from './pages/Home'
import About from './pages/About'
import Index from './pages/Index'
import { NavLink, Route, Routes, Navigate } from 'react-router-dom'
import './App.css'
import { useNavigate } from "react-router-dom";


function App() {
	let navgate = useNavigate()
	function back() {
		navgate(-1);
	}

	function next() {
		navgate(1);
	}
	return (
		<div>
			<div >
				<NavLink className={({ isActive }) => "list-group-item" + (isActive ? " " : "mactive")} to="/index" >
					Index
				</NavLink>
				<NavLink className={({ isActive }) => "list-group-item" + (isActive ? " " : "mactive")} to="/home" >
					home
				</NavLink>&nbsp;
				<NavLink className={({ isActive }) => "list-group-item" + (isActive ? " " : "mactive")} to="/about" >
					About
				</NavLink>
			</div>
			<div>
				<button onClick={back}>后退</button>
				<button onClick={next}>前进</button>
			</div>
			<Routes>
				<Route replace path="/index" element={<Index />} />
				<Route replace path="/home" element={<Home />} />
				<Route replace path="/about" element={<About />} />

				<Route path="/" element={<Navigate to="/index" replace />} />

			</Routes>

		</div>
	);
}
export default App;

其他代码跟上面一样，Gif看看效果：

withRouter 可以加工一般组件，让一般组件具备路由组件所有的API

withRouter的返回值是一个新组件 基本使用案例，有点复杂，仅仅看下基本用法

import React from 'react'
import { useNavigate,useParams,useLocation } from 'react-router-dom'
export default function withRouter(Component) {
  // 高阶函数高阶组件  接收一个组件，return出去一个组件，这里return了一个函数组件function(props){}
  // 所有的路由组件属性传到这了
  return function (props){
    const push = useNavigate();
    const params = useParams();
    const location = useLocation()
    // history里传个对象{push:push,params:params}
    return <Component {...props} history={{ push, params,location }} />;
  }
}