React router - 技术栈

react-rouer-dom是在react项目中使用的路由管理工具。它主要的作用是把路由与对应的组件建立映射，当我们访问一个路由时，就渲染对应的组件。

基本使用

安装react-router-dom
shell 复制代码
```
npm install react-router-dom
```

创建路由表

js 复制代码

import {createBrowserRouter}from 'react-router-dom';
import App from '../App';
import Home from '../pages/Home'
export default createBrowserRouter([{
	path:'/',
	element:<App />
},{
	path:'/home',
	element:<Home/>
}]);

创建路由导航
react-router-dom提供Link组件用于创建路由导航

js 复制代码

import {Link} from 'react-router-dom'
const App = ()=>{
	return <>
		<Link to="/home">Home</Link>
	</>
}

在index.js中引入router

js 复制代码

import {RouterProvider} from 'react-router-dom'
import router from './router';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
	<BrowserRouter>
		<RouterProvider route={router}></RouterProvider>
	</BrowserRouter>
);

路由嵌套

在父路由的下面再创建子路由，需要在父路由设置children属性

js 复制代码

import {createBrowserRouter}from 'react-router-dom';
import App from '../App';
import Home from '../pages/Home'；
import Article from '../pages/Article'
export default createBrowserRouter([{
	path:'/',
	element:<App />
},{
	path:'/home',
	element:<Home/>,
	children:[{
		path:'article',
		element:<Article/>
	}]
}]);

这样嵌套路由就声明完毕，为了当我们访问子路由时能够显示组件我们应当使用Outlet组件设置组件在父组件中显示的位置。

js 复制代码

import {Outlet} from 'react-router-dom';
const Home = ()=>{
	return <>
	<span>Home</span>
	<Link to="article">Articcle</Link>
		<Outlert></Outlet>
	</>
}

设置默认路由

为了当我们访问父路由能够直接显示默认的子路由，我们可以设置index属性为true

js 复制代码

import {createBrowserRouter}from 'react-router-dom';
import App from '../App';
import Home from '../pages/Home'；
import Article from '../pages/Article'
export default createBrowserRouter([{
	path:'/',
	element:<App />
},{
	path:'/home',
	element:<Home/>,
	children:[{
		index:true,
		element:<Article/>
	}]
}]);

这样当我们访问/home时就能直接显示Article组件，为了当我们点击路由导航仍能跳到article组件，需要设置link的to属性为空字符串

js 复制代码

import {Outlet} from 'react-router-dom';
const Home = ()=>{
	return <>
	<span>Home</span>
	<Link to="">Articcle</Link>
		<Outlert></Outlet>
	</>
}

路由传参

params参数

声明参数
params参数需要在配置路由时声明参数名作为占位符，当跳转路由的时候传递参数

js 复制代码

import {createBrowserRouter}from 'react-router-dom';
import App from '../App';
import Home from '../pages/Home'；
import Article from '../pages/Article'
export default createBrowserRouter([{
	path:'/',
	element:<App />
},{
	path:'/home/:id',
	element:<Home/>,
	children:[{
		path:'article',
		element:<Article/>
	}]
}]);

传递参数

js 复制代码

<Link to="/home/1"></Link>

接收参数
在组件中使用useParams()接收参数

js 复制代码

import {Outlet,useParams} from 'react-router-dom';
const Home = ()=>{
const params = useParams();
	return <>
	<span>Home</span>
	<Link to="article">Articcle</Link>
		<Outlert></Outlet>
	</>
}

search 参数

传递参数

js 复制代码

<Link to="/home?id=1"></Link>

接收参数
在组件中使用useSearchParams()接收参数

js 复制代码

import {Outlet,useSearchParams} from 'react-router-dom';
const Home = ()=>{
const params = useSearchParams();
	return <>
	<span>Home</span>
	<Link to="article">Articcle</Link>
	<Outlert></Outlet>
	</>
}

state传参

state传参是在通过调用navigate跳转路由时传递一个state属性即可。

传递参数

js 复制代码

import {useNavigate} from 'react-router-dom'
const App = ()=>{
const navigate=  useNavigate();
navigate('home',{
	replace:false,
	state:{}
});
	return <>
		<button onClick={redirectPage}>跳转</button>
	</>
}

接收参数
在组件中通过useLocation()获取参数

js 复制代码

import {Outlet,useLocation} from 'react-router-dom';
const Home = ()=>{
const params = useLocation();
	return <>
	<span>Home</span>
	<Link to="article">Articcle</Link>
	<Outlert></Outlet>
	</>
}

编程式导航

编程式导航使用useNavigate()以js的方式控路由的跳转而不是通过Link组件创建的链接跳转路由。
useNavigate()函数返回一个函数，接收一个要跳转的路由，以及一个配置对象。配置对象有一个replace参数，replace如果为true表示路由跳转replace模式，跳转的路由会替换当前路由，历史记录的数量不会增加。如果为false表示新跳转的路由会重新生成一个历史记录，历史记录会增加。

js 复制代码

import {useNavigate} from 'react-router-dom'
const App = ()=>{
const navigate=  useNavigate();
navigate('home',{
	replace:false,
	state:{}
});
	return <>
		<button onClick={redirectPage}>跳转</button>
	</>
}