react-router-dom 6.0路由詳解

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

   在子組件中獲取參數
   import { useLocation } from 'react-router-dom'

   let location = useLocation()
   let data=location.state
   

   地址欄參數獲取
   import { useParams } from 'react-router-dom'

   let params = useParams()
   let data=params.get('參數名')

4. 在class components之前使用withRouter,但在新版中withRouter已移除，如果需要升級更新為 函數式組件或者封裝hoc組件

eg:

import React  from "react";
import { useParams, useLocation, useNavigate } from "react-router-dom";
function withRouter(Component) {
  return (props) => (
    <Component
      {...props}
      params={useParams()}
      location={useLocation()}
      navigate={useNavigate()}
    />
  );
}
class Invoice extends React.Component {
  render() {
    return (
      <div
        onClick={() => this.props.navigate(`/invoices/1998`, { state: "1998" })}
      >
        22
      </div>
    );
  }
}
export default withRouter(Invoice);

如有問題，不吝賜教，歡迎留言。