react-router基本使用

react-router 的基本使用

react-router-dom

react-router 提供了路由核心 api。如 Router, Route, Switch 等，但没有提供有关 dom 操作进行路由跳转的 api。
react-router-dom 提供了 BrowserRouter、Route、Link 等 api，可以通过 dom 操作触发事件控制路由。
react-router-dom 中依赖了 react-router，所以安装的时候只要安装 react-router-dom。
安装

npm install react-router-dom --save

如果安装版本在 >=6， Switch -->Routes
v5 版本的文档: https://v5.reactrouter.com/web/guides/quick-start
v6 git 地址: https://github.com/remix-run/react-router

基本集成步骤

1. 在 index.js 中

<!-- 需要有 BrowserRouter 包裹住 APP-->
import { BrowserRouter } from "react-router-dom";
root.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>
);

2. app.js 文件

import { Routes, Route, Outlet, Link } from "react-router-dom";
// 其中 Routes 相当于v5的 Switch ,Outlet嵌套路由,index 配置默认首页路由
<nav className={globleStyles.menu}>
  <ul>
    <li>
      <Link to="/">列表</Link>
    </li>
    <li>
      <Link to="/test">测试内容</Link>
    </li>
  </ul>
</nav>
<div className={globleStyles.layout}>
  <Routes>
    <Route index element={<List />}></Route>
    <Route path="/test" element={<Test />}></Route>
    <Route path="*" element={<NoMatch />} />
  </Routes>
</div>

以上是基本路由配置
3. 页面中匹配子路由
修改 app.js中的路由配置，新增tabs,在tabs页面中新增两个子路由tabOne,tabTwo
注：tabs路由配置path=“/tabs/*”，一定加 *，否则无法匹配到子路由

<Routes>
  <Route index element={<List />}></Route>
  <Route path="/test" element={<Test />}></Route>
  <Route path="/tabs/*" element={ <Tab />}></Route>
  <Route path="*" element={<NoMatch />} />
</Routes>

tabs 页面配置，默认展示tabOne页面

const Tab = function () {
  return (
    <div className={tabs.tab}>
      <nav>
        <ul>
          <li>
            <Link to="/tabs">tab1</Link>
          </li>
          <li>
            <Link to="tabTwo">tab2</Link>
          </li>
        </ul>
      </nav>
      <div>
        <Routes>
          <Route index element={<TabOne />}></Route>
          <Route path="/tabTwo" element={<TabTwo />}></Route>
        </Routes>
      </div>
    </div>
  )
}
// 因为 添加的是 tabs/* 所以 <Route path="/tabTwo" element={<TabTwo />}></Route> path的/不能省略

3.1 嵌套路由，见github 中example/basic/src/App.tsx

以下为完整代码
app.jsx

function App () {
  // 整体接口 左边是菜单，右边是详细的针对布局
  return (
    <div className={globleStyles.App}>
      <nav className={globleStyles.menu}>
        <ul>
          <li>
            <Link to="/">列表</Link>
          </li>
          <li>
            <Link to="/test">测试内容</Link>
          </li>
          <li>
            <Link to="/tabs">tabs</Link>
          </li>
        </ul>
      </nav>
      <div className={globleStyles.layout}>
        <Routes>
          <Route index element={<List />}></Route>
          <Route path="/test" element={<Test />}></Route>
          {/* 根据下面自己路由进行 切换 */}
          <Route path="/tabs/*" element={ <Tab />}></Route>
          <Route path="*" element={<NoMatch />} />
        </Routes>
      </div>
    </div>
  );
}

其中 Route 中 index 为默认渲染页面，tabs/*代码下面有子路由
tabs页面

import tabs from "@/style/tab.module.scss"
import OneTabChild from './tabChilds/one'
import TwoTabChild from './tabChilds/two'
import { Route, Routes, Link, Outlet } from "react-router-dom"

const Tab = function () {
  return (
    <div className={tabs.tab}>
      <nav>
        <ul>
          <li>
            <Link to="/tabs">tab1</Link>
          </li>
          <li>
            <Link to="tabTwo">tab2</Link>
          </li>
        </ul>
      </nav>
      <div>
        <Routes>
          <Route index element={<TabOne />}>
          </Route>
          {/* 嵌套路由使用方法 */}
          <Route path="/tabTwo" element={<TabTwo />}>
            <Route>
              <Route
                index
                element={<OneTabChild />}
              />
              <Route path="tabTwoChild" element={<TwoTabChild />} />
            </Route>
          </Route>
        </Routes>
      </div>
    </div>
  )
}

function TabOne () {
  return <div>这是tabOne

  </div>
}

function TabTwo () {
  return (
    <div>这是tabTwo
      <nav>
        <ul>
          <li>
            <Link to="/tabs/tabTwo">tabOneChild</Link>
          </li>
          <li>
            <Link to="tabTwoChild">tabTwoChild</Link>
          </li>
        </ul>
      </nav>
      {/* 这是渲染嵌套路由的例子 */}
      <Outlet></Outlet>
    </div>
  )
}

export default Tab