react react-router v6版本

npm install react-router-dom@6

1、基本使用
	import {BrowserRouter,Routes,Route} from "react-router-dom"
	
	Routes:代替<Switch>
	
	ReactDOM.render(
	  <BrowserRouter>
	    <App />
	  </BrowserRouter>,
	  document.getElementById("root")
	);
	
	App.js:
	方式一：
		<Routes>
	      <Route path="/" element={<App />}>
	        <Route index element={<Home />} />
	        <Route path="teams" element={<Teams />}>
	          <Route path=":teamId" element={<Team />} />
	          <Route path="new" element={<NewTeamForm />} />
	          <Route index element={<LeagueStandings />} />
	        </Route>
	      </Route>
	       <Route element={<PageLayout />}>   布局路由,表示匹配子路由时才会显示父路由,父路由并不参与匹配
		    <Route path="/privacy" element={<Privacy />} />
		    <Route path="/tos" element={<Tos />} />
		  </Route>
	    </Routes>
	
	方式二：useRoutes
		function App() {
		 let element = useRoutes([
		   {
		     path: "/",
		     element: <Dashboard />,
		     children: [
		       {
		         path: "messages",
		         element: <DashboardMessages />,
		       },
		       { path: "tasks", element: <DashboardTasks /> },
		     ],
		   },
		   { path: "team", element: <AboutPage /> },
		 ]);
		
		 return element;
		}
	  
	  <BrowserRouter>
	    <App />
	  </BrowserRouter>
 
1.1、设置路由
	<Route ... />
		path:路由路径
			有'/':代表绝对路径，跳转时使用完整路径才能匹配
			无'/':代表相对路径，跳转时只用写子路由路径，会自动在前面加上父路由路径			
		element:路由组件
		index:默认路由，当匹配父路由但没有子路由匹配时，如上方匹配'/'时，会显示<Home />，不能和path一起出现
		caseSensitive：是否区分大小写，默认不区分
 		
 		布局路由：
 		 当没有path和index时，表示匹配其中子路由才会显示父路由，父路由并不参与匹配
 		  <Route element={<PageLayout />}>   
		    <Route path="/privacy" element={<Privacy />} />
		    <Route path="/tos" element={<Tos />} />
		  </Route>
		  
1.4、404路由
	path="*"匹配任意路由，但优先级最低
	
	<Routes>
      <Route path="/" element={<Home />} />
      ...
      <Route path="*" element={<NotFound />} />
    </Routes>

1.5、嵌套路由
	方式一：
	import { Routes, Route, Outlet } from "react-router-dom"

	<Routes>
      <Route path="invoices" element={<Invoices />}>
        <Route path=":invoiceId" element={<Invoice />} />
        <Route path="sent" element={<SentInvoices />} />
      </Route>
    </Routes>
    
    父路由中显示子路由:
		<div>
		   ...
		   <Outlet />
		</div>
	    
		"/invoices/sent"渲染结果:
		<App>
		  <Invoices>
		    <SentInvoices />
		  </Invoices>
		</App>
	
	 Outlet给子路由传递参数
	 	<Outlet context={{...}}/>
	 	渲染的路由组件接受
	 		import { useOutletContext } from "react-router-dom";
			const outletData = useOutletContext();

	
	方式二：
		采用1.6的写法，相当于之前版本的嵌套路由写法

1.6、多个Routes
	可以使用多个Routes，相当于兼容之前版本的路由写法
		<div>
	      <Sidebar>
	        <Routes>
	          <Route path="/" element={<MainNav />} />
	          ...
	        </Routes>
	      </Sidebar>
	
	      <MainContent>
	        <Routes>
	          <Route path="/" element={<Home />}>
	            <Route path="about" element={<About />} />
	            <Route path="support" element={<Support />} />
	          </Route>
	          ...
	        </Routes>
	      </MainContent>
	    </div>
	   
	   当Routes作为子路由时,必须在父路由路径最后添加'/*',否则不能匹配子路由：
	   	父路由：
		   	<Routes>
		      <Route path="/" element={<Home />} />
		      <Route path="dashboard/*" element={<Dashboard />} />
		    </Routes>
		dashboard的子路由：
			<Routes>
			  <Route path="/" element={<DashboardGraphs />} />
			  <Route path="invoices" element={<InvoiceList />} />
			</Routes>

2、路由导航
	声明式：
		方式一：
			<Link to="/about">About</Link>
			<Link to="/pins/123" state={{ ... }} />; 	 跳转携带参数
				let location = useLocation();
				location.state 获取参数
				
			有无'/'的区别：
				有'/':代表绝对路径，跳转时使用完整路径才能匹配
				无'/':代表相对路径，跳转时会根据当前渲染的路由加上父路由路径
				'../...'可使用'../'等方式进行路径回退到上一级等
		
		方式二：具有高亮效果的导航
			<NavLink
	            style={({ isActive }) => ({color: isActive ? "red" : ""})}
	            className={({ isActive }) => isActive ? "red" : "blue"} 
	        	...
	        	end 可以使得匹配子路由时，父路由不高亮
	          >
	          	{({ isActive }) => (
	              <span className={isActive ? activeClassName : undefined}>
	                Tasks
	              </span>
	            ))}
	          <NavLink />
		
		方式三：导航组件，当导航被渲染时进行
			{boolean && (
	          <Navigate to="/dashboard" replace={true}  state={{...}}/>
	        )}
			
	编程式：
		import { useNavigate } from "react-router-dom";
		
		let navigate = useNavigate();
		
		navigate(`/invoices/${newInvoice.id}`);
		navigate(`/invoices/${newInvoice.id}`,{replace:true});		替换记录
		navigate("/users/123", { state: partialUser }); 跳转携带参数
			let location = useLocation();
			location.state 获取参数
		navigate(n) 根据数字记录跳转
			
3、use匹配
	(1)url完整信息
		let location = useLocation();
		
		返回：
			{
			  pathname: "/invoices",
			  search: "?filter=sa",
			  hash: "",
			  state: null,
			  key: "ae4cz2j" 每个地址都对应一个唯一的key，可以根据这个key进行一些回退页面等数据缓存的操作
			}
	
	(2)动态路径参数匹配
		path="invoices/:invoiceId"
		
		let params = useParams();	
		
	(3)url参数query
		path="invoices/:invoiceId?name=jeff"
	
		let [searchParams, setSearchParams] = useSearchParams();
		searchParams.get('key');	和URLSearchParams对象具有同样的方法
		setSearchParams({...});  	改变url的query参数然后重新渲染路由
		
	(4)获取导航方式
		const type = useNavigationType()
		"POP" | "PUSH" | "REPLACE"
	
	(5)获取匹配到的路由信息
		const match = useMatch()
	
	(6)获取匹配到的子路由组件
		const element = useOutlet()
		
	(7)根据相对路径，返回当前路由完整路径
		const path = useResolvedPath(to)
		
4、兼容类组件withRouter写法
	import {
	  useLocation,
	  useNavigate,
	  useParams,
	} from "react-router-dom";
	
	function withRouter(Component) {
	  function ComponentWithRouterProp(props) {
	    let location = useLocation();
	    let navigate = useNavigate();
	    let params = useParams();
	    return (
	      <Component
	        {...props}
	        router={{ location, navigate, params }}
	      />
	    );
	  }
	
	  return ComponentWithRouterProp;
	}