react-router-dom文档:https://github.com/remix-run/react-router/blob/main/docs/start/tutorial.md
官网文档查看:https://reactrouter.com/en/6.4.3/route/route
项目使用的react-router-dom版本为v6.4.3
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.3"
},
安装依赖
npm i react-router-dom --save
设置布局
//src\App.jsx
import React from "react";
import { Outlet,useNavigate } from "react-router-dom";
import './App.css';
function App(props) {
const navigate = useNavigate();
const go = (link) => {
navigate(link)
}
return (
<div className="H-layout">
<div className="H-header">
<span> hello Work</span>
</div>
<div className="H-body">
<div className="H-silder">
<button className="btn" onClick={() => go('/home')}>Home </button>
<button className="btn" onClick={() => go('/looking')}>Looking </button>
<button className="btn" onClick={() => go('/about')}>ablout</button>
</div>
<div className="H-container">
<Outlet />
</div>
</div>
</div>
)
}
export default App;
入口主文件
//src\main.js
import React from "react";
import ReactDOM from 'react-dom/client';
import { RouterProvider } from "react-router-dom";
import router from './router';
ReactDOM.createRoot(document.getElementById('app'))
.render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>
);
路由配置
//src\router.js
import { createHashRouter} from "react-router-dom";
import React from "react";
import App from "./App.jsx";
import Looking from './pages/Looking/index.jsx';
import About from './pages/About/index.jsx';
const router = createHashRouter([
{
path: "/",
element: <App />,
children: [
{
path: "home",
element: <div>home</div>,
},
{
path: "looking",
element: <Looking />,
},
{
path: "about",
element: <About />,
},
]
},
]);
export default router;