1. ルーティングの基本的な使い方
1.1 プロジェクト環境の準備
コードは次のとおりです（例）。
# 创建react项目
$ yarn create vite react-router --template react
# 安装所有依赖包
$ yarn
# 启动项目
$ yarn dev
# 安装react-router包
$ yarn add react-router-dom@6
1.2 基本的な使い方
コードは次のとおりです（例）。
// 引入必要的内置组件
import {
BrowserRouter, Routes, Route, Link } from 'react-router-dom'
// 准备俩个路由组件
const Home = () => <div>this is home</div>
const About = () => <div>this is about</div>
function App() {
return (
<div className="App">
{
/* 按照规则配置路由 */}
<BrowserRouter>
//Link to为声明式跳转
<Link to="/">首页</Link>
<Link to="/about">关于</Link>
<Routes>
<Route path="/" element={
<Home />}></Route>
<Route path="/about" element={
<About />}></Route>
</Routes>
</BrowserRouter>
</div>
)
}
export default App
2. ルーティングジャンプ
2.1 プログラムによるナビゲーション
概念: ルーティング ページは、ホームページから概要ページにジャンプするなど、js プログラミングを通じてジャンプします。
実装手順:
1. useNavigate フック関数をインポートします。
2. useNavigate 関数を実行してジャンプ関数を取得
します。 3. イベント内でジャンプ関数を実行して、
ホームページからバージョン情報ページへのジャンプなどのルーティング ジャンプを完了します: (' /about' パスは正しいです
// 导入useNavigate函数
import {
useNavigate } from 'react-router-dom'
const Home = () => {
// 执行函数
const navigate = useNavigate()
return (
<div>
Home
<button onClick={
()=> navigate('/about') }> 跳转关于页 </button>//路由跳转，无参
</div>
)
}
export default Home
注: ジャンプ時に履歴を追加したくない場合は、追加のパラメータ replace to true を追加できます。
navigate('/about', {
replace: true } )
2.2 ジャンプパラメータ
2 つの方法:
1) SearchParams でパラメータを渡す
ルートでパラメータを渡すときに、パラメータを追加します
navigate('/about?=1001&name=cp')
パラメーターをルーティングするときは、useSearchParams を使用して取得します。
let [params] = useSearchParams()
//params是一个对象
let id = params.get('id')
let name = params.get('name')
2) Params パラメータを渡す
ルート内でパラメータを渡す場合、パラメータを追加します
navigate('/about/1001')
パラメータを渡す前にルーティング パスを変更する必要があります
<Route path="/about/:id" element={
<About />}></Route>
ルートからパラメータを取得する場合は、useParams を使用してパラメータを直接取得します。
let [params] = useParams()
//params是一个对象
let id = params.id
3. ネストされたルーティング
1. まず、2 つの第 1 レベルのルーティング
Layout.jsをビルドします。
function Layout(){
return (
<div>
layout
</div>
)
}
export default Layout
ログイン.js
function Login(){
return (
<div>
login
</div>
)
}
export default Login
App.jsで導入
import {
BrowserRouter,Routes,route} from 'react-router-dom'
import Layout from './Layout'
import Login from './Login'
function App(){
return (
<BrowserRouter>
<Routes>
<Route path='/' element={
<Layout />}></Route>
<Route path='/login' element={
<Login />}></Route>
</Routes>
</BrowserRouter>
)
}
export default App
- 2 つのセカンダリ ルート
Board.jsを構築する
function Board(){
return (
<div>
board
</div>
)
}
export default Board
記事.js
function Article(){
return (
<div>
article
</div>
)
}
export default Article
第 1 レベルと第 2 レベルのルーティング ファイルが両方とも作成されました。この時点で、ネストは 2 つの手順で完了する必要があります:
1) App.js でネストされたルーティング宣言を定義する
<Routes>
<Route path="/" element={
<Layout/>}>
//定义二级路由嵌套
<Route path="board" element={
<Board/> } />
<Route path="article" element={
<Article/> } />
</Route>
<Route path='/login' element={
<Login />}></Route>
</Routes>
2) Layout.js の第 1 レベルのルートで指定されたセカンダリ ルート出口を使用します。
import {
Outlet} from 'react-router-dom'
function Layout(){
return (
<div>
layout
{
/* 二级路由的path等于 一级path + 二级path */ }
<Link to="/board">board</Link>
<Link to="/article">article</Link>
//二级路由出口,也就是在Layout后
<Outlet />
</div>
)
}
export default Layout
ページのデフォルト ルート表示を設定する必要がある場合は、App.js でこのルートのパスを削除し、インデックス (ホームページ) に置き換えるだけです。第 1 レベルのルーティングでは、対応する第 2 レベルのルーティング パスを空に設定できます。
App.jsで
<Routes>
<Route path="/" element={
<Layout/>}>
<Route index element={
<Board/> } />
<Route path="article" element={
<Article/> } />
</Route>
</Routes>
Layout.js内
import {
Outlet } from 'react-router-dom'
const Layout = () => {
return (
<div>
layout
{
/* 默认二级不再具有自己的路径 */ }
<Link to="/">board</Link>
<Link to="/article">article</Link>
{
/* 二级路由出口 */ }
<Outlet/>
</div>
)
}
4. 404ルーティング設定
1. NotFoundコンポーネントを準備する
const NotFound = () => {
return <div>this Page is NotFound</div>
}
export default NotFound
App.jsで
<BrowserRouter>
<Routes>
<Route path="/" element={
<Layout />}>
<Route index element={
<Board />} />
<Route path="article" element={
<Article />} />
</Route>
<Route path='/login' element={
<Login />}></Route>
//当所有路径都没有匹配到时，兜底匹配
<Route path="*" element={
<NotFound />}></Route>
</Routes>
</BrowserRouter>
5. 集中ルーティング設定
シナリオ: ルーティング権限制御ポイントが必要な場合、ルーティング配列の権限をフィルタリングする必要があります。いわゆる集中ルーティング構成では、配列を使用してすべてのルーティング対応を均一に書き込み、元の Roues コンポーネントを置き換えます。
import {
BrowserRouter, Routes, Route, useRoutes } from 'react-router-dom'
import Layout from './pages/Layout'
import Board from './pages/Board'
import Article from './pages/Article'
import NotFound from './pages/NotFound'
// 1. 准备一个路由数组 数组中定义所有的路由对应关系
const routesList = [
{
path: '/',
element: <Layout />,
children: [
{
element: <Board />,
index: true, // index设置为true 变成默认的二级路由
},
{
path: 'article',
element: <Article />,
},
],
},
// 增加n个路由对应关系
{
path: '*',
element: <NotFound />,
},
]
// 2. 使用useRoutes方法传入routesList生成Routes组件
function WrapperRoutes() {
let element = useRoutes(routesList)
return element
}
function App() {
return (
<div className="App">
<BrowserRouter>
{
/* 3. 替换之前的Routes组件 */}
<WrapperRoutes />
</BrowserRouter>
</div>
)
}
export default App