如何在react项目中使用react-router-dom

1. 使用 npx create-react-app b初始化项目,npm i react-router-dom安装router依赖
2. 首先从react-router-dom包中导出createBrowserRouter对象来创建路由对象和router.js文件

// 创建router文件
import { createBrowserRouter } from "react-router-dom";
import App from "./App.js";
export default createBrowserRouter([{path: "/",element: <App />,},
]);

3. 把router.js文件挂载到启动文件index.js中,因为使用router渲染组件,默认渲染的App组件就可以删掉,改用<RouterProvider router={router} />来代替

import router from "./router";
import { RouterProvider } from "react-router-dom";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<RouterProvider router={router} />
);

4. 这样启动项目根目录就可以匹配到App组件了

创建子路由

5. 子路由在一个项目是一定会有的。修改router.js文件和App.vue。

// router.js
import { createBrowserRouter, Navigate, Link } from "react-router-dom";
import App from "./App.js";
export default createBrowserRouter([{path: "/",element: <App />,children: [{path: "/a",element: (<><div>a</div></>),},{path: "/b",element: (<><div>b</div></>),},],},
]);

6. 在App.vue中有一个注意,使用子路由的时候需要给子路由设置一个出口组件<Outlet />,同时可以使用<Link />组件来实现路由跳转。

// App.vue
import "./App.css";
import { Outlet, Link } from "react-router-dom";
function App() {return (<div className="App"><Link to="/">首页</Link><Link to="/a">a</Link><Link to="/b">b</Link><Outlet /></div>);
}export default App;

7. 注意事项
   7.1 在index.js文件中挂载router文件时,使用<RouterProvider router={router} />挂载,删除掉原有的默认渲染的<App />组件
   7.2 要使用<Outlet />来给子路由设置出口