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>
    </Routes>
 
1.1、设置路由
	<Route ... />
		path:路由路径
			有'/':代表绝对路径，跳转时使用完整路径才能匹配
			无'/':代表相对路径，跳转时只用写子路由路径，会自动在前面加上父路由路径			
		element:路由组件
		index:默认路由，当匹配父路由但没有子路由匹配时，如上方匹配'/'时，会显示<Home />
 
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>
	
	方式二：
		采用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>
		
		有无'/'的区别：
		有'/':代表绝对路径，跳转时使用完整路径才能匹配
		无'/':代表相对路径，跳转时会自动在前面加上父路由路径
				
	编程式：
		import { useNavigate } from "react-router-dom";
		
		let navigate = useNavigate();
		
		navigate(`/invoices/${newInvoice.id}`);

3、use匹配
	(1)动态路径参数匹配
		path="invoices/:invoiceId"
		
		let params = useParams();	
		
	(2)