要使用路由首先要先安装

npm install react-router-dom

一级路由

安装完后先引入，然后才能使用

import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';

示例：

 <Router>
        <ul className="topBar">
          <li><Link to="/">PageA</Link></li>
          <li><Link to="/PageB">PageB</Link></li>
        </ul>
        <Routes>
          <Route exact path="/" element={<Homes/>}/>
          <Route path="/PageB" element={<About/>}>
            <Route path='test' element={<Test/>}></Route>//注意这是嵌套路由。test前面不要加/ 要是相对路径才行
            <Route path='demo' element={<Demo/>}></Route>
          </Route>
        </Routes>
        </Router>

自己练习示例：

二级路由也就是嵌套路由

嵌套路由你这个写法就不一样了，你需要这样子写<Route><Route/>

而不能这样写了<Route/> ， 因为里面要写嵌套的路由，要给它包裹起来

这样配置好后，在哪个要嵌套路由的页面引入这个

link 是写要跳转的路径，而Outlet和vue的routerview一样就是内容显示的区域，就是内容它里面显示

import { Link, Outlet } from "react-router-dom";

在那个嵌套路由的页面这么写

在App.js里面还需要引入嵌套路由里面写的两个组件

App.js是一个假设就是配置路由跳转的页面，就算是嵌套的路由也得在这个里面引入然后

在进行配置

在配置路由的哪个页面在配置嵌套的路由就可以了

编程式路由

不集中配置路由

React router集中配置路由

把路由配置在一个文件里面的方式（小型项目不建议，但是我是比较喜欢这样写的）

先配置主入口文件index.js里的东西改一下，改成这样的

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import reportWebVitals from './reportWebVitals';
import { RouterProvider } from 'react-router-dom';
import router from './router';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <RouterProvider router={router} />
  </React.StrictMode>
);


reportWebVitals();

在创建路由文件router.js

router.js文件里的东西这样写，这里面也是至少要配置两个路由，一个的话会出错误

还有就是在路由配置里面可以设置index：true这个是默认渲染的

import { createBrowserRouter } from "react-router-dom";
import App from "./App";

import Home from './pagaes/Home';
export const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },
  {
    path: "/home",
    element: <Home />,
  },
]);

export default router;

页面跳转示例

要先引入这个东西然后初始化一下最后用navigate（）括号里面写路径就可以跳转了

import { useNavigate } from 'react-router-dom';

简便方法直接在按钮里写

这样配置后一级路由怎么实现就是这种的

和vue一样也是配置子路由

然后页面引入Link和Outlet一个是跳转用的一个是内容显示区域