React路由

使用Link,NavLink方式创建路由

{/* 路由链接，Link和NavLink最终会被转为<a>标签 to被转为href*/}
<NavLink to="login">登录</NavLink>
<NavLink to="register">注册</NavLink>
<NavLink to="home">主页</NavLink>
<NavLink to="mine">我的</NavLink>

{/* 注册路由，展示对应的路由组件，"/" 可省略 */}
<Routes>
    <Route path="/Login" element={<Login />}></Route>
    <Route path="/Register" element={<Register />}></Route>
    <Route path="/Home/*" element={<Home />}></Route>		{/* 有二级路由用 "/*"模糊匹配 */}
    <Route path="/Mine" element={<Mine />}></Route>
    <Route path="/" element={<Navigate to="/home" />}></Route>		{/* 作用：只要<Navigate>组件被渲染，就会修改路径，切换视图 */}
</Routes>

使用路由表集中管理注册路由

react-router-dom version6支持原生路由表

// 创建routes目录，一般在src目录下创建
{/* 在routes.js下导入所有路由组件 */}
import { Navigate } from 'react-router-dom'
import Home from '../pages/Home'
import Login from '../pages/Login'
import Register from '../pages/Register'
import Mine from '../pages/Mine'
// 子路由
import Detail from '../pages/Home/Detail'
// 路由表，[{path:'...',element:</>,children:[{...}]},{...}]
export const routes = [
  {
    path:'/Home/*',
    element: <Home />,
    children:[
      {
        path:'Detail',
        element: <Detail />
      },
    ]
  },
  {
    path:'/Login',
    element: <Login />
  },
  {
    path:'/Register',
    element: <Register />
  },
  {
    path:'/Mine',
    element: <Mine />
  },
  {
    path:'/',
    element: <Navigate to="/Home" />
  },
]

// 在对应路由文件中引入钩子函数 useRoutes、引入路由表文件
import { useRoutes } from 'react-router-dom'
import {routes}  from './routes'
const App = () => {
  const element = useRoutes(routes)
  return(
  	<NavLink to="login">登录</NavLink>
    <NavLink to="register">注册</NavLink>
    <NavLink to="home">主页</NavLink>
    <NavLink to="mine">我的</NavLink>
	{/* before */}
	<Routes>
        <Route path="/Login" element={<Login />}></Route>
        <Route path="/Register" element={<Register />}></Route>
        <Route path="/Home/*" element={<Home />}></Route>		{/* 有二级路由用 "/*"模糊匹配 */}
        <Route path="/Mine" element={<Mine />}></Route>
        <Route path="/" element={<Navigate to="/home" />}></Route>
    </Routes>
	{/* after */}
	{element}		// 等同于<Routes><Route></Route></Routes>
  )
}
// 如示例代码中在路由组件<Home/>中有二级路由<Detail/>，那么在<Home/>组件中引入 Outlet
// home.js
import React from 'react'
import { NavLink,Outlet } from 'react-router-dom'
const Home = () => {
  return (
    <>
      <div>主页</div>
      <br />
      <NavLink to="detail">详情</NavLink>
      <Outlet />	// 和 {element} 相似
    </>
  )
}
export default Home

编程式路由导航

使用Link或NavLink方式跳转路由有很多的局限性，如在3秒后路由自动跳转，鼠标滑过图片路由跳转，这些用Link很难实现路由跳转。于是就有了编程式路由导航，不使用Link或NavLink就是编程式路由导航。

函数式

RouterV6版本使用useNavigate()进行编程式路由导航，useNavigate的作用就是返回一个函数

// 引入 useNavigate
import {useNavigate} from 'react-router-dom'
const App = () => {
  const element = useRoutes(routes)		// 路由表
  const navigate = useNavigate()		// 返回一个函数
  const handle = () => {
    // 第一种方式，指定具体的路径
    navigate('/login',{				// 调用函数，参数1--->要跳转的路由路径
      replace:false,				// 参数2[可选]--->replace，路由跳转模式,默认push模式，有痕迹，replace模式，true时无痕迹
      state:{a:1,b:2}				// 向路由组件传递state参数，示例中就向<login/>传递了参数
    })
    // 第二种方式，传入数值进行前进或后退，类似于5.x中的history.go()方法
    // navigate(-1)
  }
  return (
    <div>
      <button onClick={handle}>按钮</button>
    </div>
  )
}

RouterV5.1.0以上版本使用useHistory进行编程式路由导航

import { useHistory } from 'react-router-dom'
export default function App() {
	const history = useHistory()
	
	return(
		...
		<xxx 
        	onClick={(e) => {
        		history.push(e.key)
        	}}
        />
	)
}

类式

借助this.props.history中的属性也能实现路由跳转