React react-router-dom 6.0路由使用

由於react路由版本的更新迭代，記錄路由知識點

新react-router-dom地址，點選檢視詳情。

下面為使用的例子

1. Install

   npm install react-router-dom@6 history@5

   yarn add react-router-dom@6 history@5

2. 配置路由地址

import React from 'react';

import { BrowserRouter as Router, Routes, Route  } from "react-router-dom";

function Routelist(){
  return(
    <Router>
	<Routes>
		<Route path='/' element={<App />}></Route>
		<Route path="invoices" element={<Invoices />}>
			<Route
			       index
			       element={
					<main style={{ padding: "1rem" }}>
						<p>Select an invoice</p>
					</main>
				}
			/>
			<Route path=":invoiceId" element={<Invoice />} />
		</Route>
		{/* 不匹配 */}
		<Route
			path="*"
			element={
				<main style={{ padding: "1rem" }}>
					<p>There's nothing here!</p>
				</main>
			}
		/>
	</Routes>
</Router>
  )
}

 

在使用導航時需要特別注意的時，需要在父元件裡面增加 <Outlet /> ，才可以跳轉成功。

3. 跳轉頁面的方式
   navigate(/invoices/${number}, { state: 1 })

   <NavLink to={/invoices/${number}} state={{a:1}}>1

在子元件中獲取引數
let location = useLocation()
let data=location.state

位址列引數獲取
let params = useParams()
let data=params.get('引數名')