記事ディレクトリ
序文
インストール
react-router と react-router-dom をインストールします
npm i react-router-dom -s
使用
小さなケース
index.js ファイルにコードを追加する
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import {
createBrowserRouter,
RouterProvider,
} from "react-router-dom";
import Home from './views/Home'
const router = createBrowserRouter([ // 路由的配置对象，类似于vue
{
path: "/",
element: <div>Hello world!</div>,
},
{
path: '/home',
element: <Home></Home>
}
]);
const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
<React.StrictMode>
<RouterProvider router={
router}/>
</React.StrictMode>
);
reportWebVitals();
このように、ページ上のリンクをクリックするか、アドレス バーにアドレスを入力して、さまざまなコンポーネントを切り替えることができ
ます
。
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>
<App/>
</BrowserRouter>
</React.StrictMode>
);
BrowserRouter と HashRouter
反応は一度だけ使用され、アプリケーション全体をラップします
ブラウザルーター
h5 の history.pushState API 実装 (http://localhost:8000/home) を使用します。
通常はこれを使用します。
ハッシュルーター
URL のハッシュを使用して実装 (http://localhost:8000/#/home)
プログラムによるナビゲーション
js プログラミングによるページ ジャンプのルーティング
- usenavigate フック関数をインポートする
- フック関数を実行してジャンプ関数を取得する
- ジャンプ機能を実行してジャンプを完了する
機能コンポーネント プログラムによるナビゲーション
// 导入useNavigate
import {
useNavigate} from "react-router";
function Login() {
// 执行useNavigate()的得到一个跳转函数
const Navigate = useNavigate()
function goTo() {
// 调用跳转函数传入目标路径
Navigate('/home')
// Navigate('/home',{replace:true}) 可以配置额外得参数replace为true，
//表示不想加历史记录
// Navigate('/home',{replace:true},state:{id:"001"}) 也可以传递state参数
}
return (
<div>
<h1>这是login</h1>
<button onClick={
goTo}>跳转到home</button>
</div>
)
}
export default Login
クラス コンポーネント プログラミング ナビゲーション
ジャンプ パラメータの受け渡し (プログラムによる)
検索パラメータ
/home?id=1001&name="tom"&gender="男"
機能部品
パラメータを渡す
Navigate('/home?id=1001')
取参
import React from 'react';
import {
useSearchParams} from "react-router-dom";
function Home() {
const [params] = useSearchParams()
// params 是一个对象 对象里有一个get的方法
// 用来获取对应的参数
// 把参数的名称作为get的实参传过来
let id = params.get('id')
return (
<div>
这是首页,得到的参数id为:{
id}
</div>
)
}
パラメータ
使用
/home/id=1001
機能部品
ジャンプルート
Navigate('/home/id=1001')
対応するルーティング構成
<Route path="/home/:id" element={
<Home/>}/>
取参
import React from 'react';
import {
useParams} from "react-router-dom";
function Home() {
const params = useParams()
let id = params.id
return (
<div>
这是首页,得到的参数id为:{
id}
</div>
)
}
export default Home;
州
機能部品
パラメータを渡す
<Link
to="/play"
state={
{
id:"001",
title:"标题",
gen:"不错"
}}
>播放页</Link>
受信パラメータ
import React from 'react';
import {
useLocation} from "react-router";
function Play() {
const state = useLocation()
console.log(state)
return (
<div>
这是播放页
</div>
)
}
export default Play;
ネストされたルート
ホームのセカンダリ ルートを構成する
<Routes>
{
/*指定路径和组件的对应关系，path代表路径 element代表组件 成对出现
path -> element*/}
<Route path="/" element={
<Play/>}></Route>
<Route path="/home" element={
<Home/>}>
{
/*Home的二级路由*/}
{
/*默认渲染的二级路由，添加一个index属性，path去掉*/}
<Route index element={
<HomeA/>}/>
<Route path="/home/a" element={
<HomeA/>}/>
<Route path="/home/b" element={
<HomeB/>}/>
</Route>
<Route path="/play" element={
<Play/>}/>
<Route path="/songList" element={
<SongList/>}/>
<Route path="/login" element={
<Login/>}/>
</Routes>
home.jsx で
import {
Outlet} from "react-router";
function Home() {
return (
<div>
啦啦啦啦
{
/*二级路由出口位置*/}
<Outlet></Outlet>
</div>
)
}
export default Home;
ルーティング テーブル
ルートが多すぎる場合は、
上記のようにルーティング テーブルに分割できます。
<Routes>
<Route path="/" element={
<Play/>}></Route>
<Route path="/home" element={
<Home/>}>
{
/*Home的二级路由*/}
<Route index element={
<HomeA/>}/>
<Route path="/home/a" element={
<HomeA/>}/>
<Route path="/home/b" element={
<HomeB/>}/>
</Route>
<Route path="/play" element={
<Play/>}/>
<Route path="/songList" element={
<SongList/>}/>
<Route path="/login" element={
<Login/>}/>
{
/*兜底，如果上面的都匹配不到，就会渲染NotFound组件*/}
<Route path="*" element={
<Login/>}/>
</Routes>
この部分を抽出して、新しいルーティング js ファイルを作成できます。Vueのルータービューに似ています
import Play from '../components/play'
import Home from "../components/home";
import HomeA from "../components/home/HomeA";
import HomeB from "../components/home/HomeB";
import {
Navigate} from "react-router";
import SongList from "../components/songList";
import Login from "../components/login";
const routes = [
{
path: '/',
element: <Play/>
},
{
path: '/home',
element: <Home/>,
children: [
{
path:'a',
element:<HomeA/>
},
{
path:'b',
element: <HomeB/>
},
{
path:'',
element: <Navigate to="/home/b"/>
}
]
},
{
path:'/play',
element: <Play/>
},
{
path:'/songList',
element: <SongList/>
},
{
path:'/login',
element: <Login/>
}
]
export default routes
ルーティング テーブルを使用する
import './App.css';
import {
Link} from 'react-router-dom'
import {
useRoutes} from "react-router";
import routes from './routes'
function App() {
const element = useRoutes(routes)
return (
<div className="App">
<Link to="/home">首页</Link>
<Link to="/play">播放页</Link>
<Link to="/songList">歌单页</Link>
{
element}
</div>
)
}
export default App;