インストール
npm install react-router-dom
メイン、js に登録します (描画された線を見てください)
import {
StrictMode } from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import {
BrowserRouter } from 'react-router-dom';
------------------------------------------------
import '@/styles/index.scss';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
--------------
<StrictMode>
<App />
</StrictMode>
</BrowserRouter>
----------------
);
ルーティング構造は次のとおりです。
import Chat from '@/views/Chat';
import {
lazy, Suspense } from 'react';
import Other1 from '@/views/Other1';
import Other2 from '@/views/Other2';
const Home = lazy(() => import('@/views/Home'));
const Friend = lazy(() => import('@/views/Friend'));
const Setting = lazy(() => import('@/views/Setting'));
const LoadingTip = (Element)=> (
<Suspense fallback={
<div>loading...</div>}>
<Element />
</Suspense>
);
const routes = [
{
path: '/',
element: LoadingTip(Home),
meta: {
title: '首页',
},
},
{
path: '/friend',
element: LoadingTip(Friend),
meta: {
title: '好友',
auth: true
},
children: [
{
path: 'chat/:name?', element: <Chat></Chat> },
],
},
{
path: '/setting',
element: LoadingTip(Setting),
meta: {
title: '设置',
auth: true
},
children: [
{
index: true, element: <Other1></Other1> },
{
path: 'other1', element: <Other1></Other1> },
{
path: 'other2', element: <Other2></Other2> },
],
},
];
export default routes;
1. ナビゲートを使用してページにジャンプし、パラメータを運ぶ
import { useNavigate } from "react-router-dom";
export default () => {
const navigate = useNavigate();
return (
<div>
<h2>首页</h2>
<button onClick={()=> navigate('/setting') }>去设置</button>
<button onClick={()=> navigate('/friend/chat/张三') }>去聊天1</button>
<button onClick={()=> navigate('/friend/chat?name=张三') }>去聊天2</button>
</div>
);
};
2.「Go to Chat」ページは、スタイルを追加する isActive によってルーティングを判断します
import {
NavLink, Outlet } from "react-router-dom";
export default () => {
const users = [
{
name: "张三", age: 18 },
{
name: "李四", age: 16 },
{
name: "王五", age: 19 },
];
return (
<div>
<h2>好友</h2>
<div>
{
}
{
users.map((item) => (
<NavLink
to={
"/friend/chat/" + item.name}
style={
({
isActive }) => ({
backgroundColor: isActive ? "#0383fe" : "white",
})}
key={
item.name}
>
{
item.name}
</NavLink>
))}
<hr />
{
}
{
users.map((item) => (
<NavLink
to={
"/friend/chat/?name=" + item.name}
style={
({
isActive }) => ({
backgroundColor: isActive ? "#0383fe" : "white",
})}
key={
item.name}
>
{
item.name}
</NavLink>
))}
</div>
<hr />
{
}
<Outlet></Outlet>
</div>
);
};
ボタンをクリックして動的サブルーティング切り替え
import {
Link , Outlet} from "react-router-dom";
export default () => {
return (
<div>
<h2>设置</h2>
<Link to="/setting/other1">Other1</Link>
<Link to="/setting/other2">Other2</Link>
<hr />
<Outlet></Outlet>
</div>
);
};
app.jsx の内容
import {
useEffect } from 'react';
import {
NavLink, useLocation, useRoutes } from 'react-router-dom';
import routes from './routes';
export default function App() {
const ElementRouter = useRoutes(routes);
const location = useLocation();
useEffect(() => {
console.log('进入:', location.pathname);
return () => {
console.log('离开:', location.pathname);
};
});
return (
<div className='App'>
{
}
<nav className='nav'>
<div className='w'>
{
routes.map(item => (
<NavLink style={
({
isActive }) => ({
backgroundColor: isActive ? 'red' : 'white' })} to={
item.path} key={
item.path}>
{
item.meta.title}
</NavLink>
))}
</div>
</nav>
{
}
{
ElementRouter}
</div>
);
}