React-router-dom v6
作者：互联网
1.BrowserRouter
要放在最顶层，即所有组件的最外面;可以定义别名
2.Routes
包括相对路由和链接、自动路由排名、嵌套路由和布局等功能
3.路由跳转
"/"开头为绝对路由，否则为相对路由
4.Route
负责渲染React组件的UI
1）path属性
始终与应用程序当前的URL匹配
2）element属性
当遇到当前URL时，会告诉Route组件渲染哪个React组件
Demo中的情况：
<Route path="/" element={<Father />}>
5.Link
添加一个导航栏 相当于HTML中的a标签 只能在Router内部使用
Demo中的情况：
<Link to="login" style={{ padding: 10 }}>
6.编程式跳转(useNavigate)
使用useNavigate钩子函数生成navigate对象，可以通过js代码完成路由跳转
Demo中的情况：
const navigate = useNavigate();
<button onClick={() => navigate('/')}>点击跳转回首页</button>
7. 路由传参的三种方式
1)动态路由参数(读取URL参数) 关键字：Params
在Route组件中的path属性中定义路径参数；在组件内通过useParams hook访问路径参数
Demo中的情况：
路由中：
<Route path="/user" element={<User />}></Route>
<Route path="/user/detail/:id" element={<Detail />}></Route>
detail文件中：
const params = useParams();
<h3>此时是用户{params.id}</h3>
user文件中：
<Link to="detail/1"></Link>
通常用在组件呈现时获取数据：
function Invoice() {
let { invoiceId } = useParams();
let invoice = useFakeFetch(`/api/invoices/${invoiceId}`);
return invoice ? (
<div>
<h1>{invoice.customerName}</h1>
</div>
) : (
<Loading />
);
}
2）search参数
查询参数不需要在路由中定义
使用useSearchParams hook来访问查询参数，用法与useState类似，会返回当前对象和更改他的方法
更改searchParams时，必须传入所有查询参数，否则会覆盖已有参数
//路由链接(携带参数)：
<Link className="nav" to={`/b/child2?age=20&name=zhangsan`}>Child2</Link>
//接收参数方法：
import { useSearchParams } from "react-router-dom";
const [searchParams, setSearchParams] = useSearchParams();
console.log( searchParams.get(“age”)); // 20
3）state参数
//通过Link的state属性传递参数
<Link
className="nav"
to={`/b/child2`}
state={{ id: 999, name: "i love merlin" }} //要传递的参数写在此处
>
Child2
</Link>
//接收参数：
import { useLocation } from "react-router-dom";
const { state } = useLocation();
//state参数 => {id: 999, name: "i love merlin"}
//刷新也可以保留参数
8.嵌套路由
通过嵌套的书写Route组件 实现对嵌套路由的定义
在父组件中使用Outlet来显示匹配到的子组件，目的是作为子路由的出口
Demo中的情况：
父组件：<Outlet />
路由：嵌套路由的形式
<Route path="home" element={<Home />}>
<Route path="homeSpan" element={<HomeSpan />}></Route>
<Route path="HomeDiv" element={<HomeDiv />}></Route>
</Route>
9.默认路由
在嵌套路由中，如果URL仅匹配了父级URL，则Outlet中会显示带有index属性的路由
Demo中的情况：
<Route index element={<Default />}></Route>
10.全匹配路由
path值取“*”时，可以匹配任何(非空)路径，但他的优先级是最低的，一般用来设置404界面
Demo中的情况：
<Route path="*" element={<NotFound />}></Route>
11.多组路由
通常一个应用中只有一个Routes组件，但是根据实际需求也可以定义多个路由出口(比如侧边栏和主页面都要随URL变化)
<Router>
<SideBar>
<Routes>
<Route></Route>
</Routes>
</SideBar>
<Main>
<Routes>
<Route></Route>
</Routes>
</Main>
</Router>
12.重定向(Navigate)
当前在a，想重定向到b，可以通过Navigate组件进行重定向到其他路径
import { Navigate } from 'react-router-dom';
function A(){
return (
<Navigate to="/b" />
)
}
13.后裔路由(Descendant)
在父路由路径的末尾放置一个 *，可以避免当 URL 长于父路由的路径时，父路由与 URL 不匹配，影响后代路由的显示
官网示例：
function App() {
return (
<Routes>
<Route path="/" element={<Home />} />
<Route path="dashboard/*" element={<Dashboard />} />
</Routes>
);
}
function Dashboard() {
return (
<div>
<p>Look, more routes!</p>
<Routes>
<Route path="/" element={<DashboardGraphs />} />
<Route path="invoices" element={<InvoiceList />} />
</Routes>
</div>
);
}
Demo地址：https://stackblitz.com/edit/react-xlsspr?file=src%2FPages%2FUser.js
标签：URL,Demo,React,嵌套,参数,v6,组件,router,路由 来源： https://www.cnblogs.com/guohaodi/p/15773068.html