React 路由使用

Posted 2023-03-09

参考技术A react-router-dom 是一个处理页面跳转的三方库，在使用之前需要先安装到我们的项目中：

使用路由时需要为组件指定一个路由的 path ，最终会以 path 为基础，进行页面的跳转。具体使用先看个简单示例，该示例比较简单就是两个 Tab 页面的来回切换。

最终交互时，上述路由配置会出现彼此覆盖的情况，如下图：

为了保证 App 组件，不会在 Tab1 和 Tab2 切换时被覆盖需要使用嵌套路由。

嵌套路由，可以保证子路由共享父路由的界面而不会覆盖。为此 React 提供了 Outlet 组件，将其用于父组件中可以为子路由的元素占位，并最终渲染子路由的元素。

Outlet 渲染一个子路由的元素

最终效果如下图：

通过 path='*' ,实现没有其他路由匹配时，对其进行匹配。

效果如图：

通过路由传递参数到组件中

最终效果：

当我们切换至 Tab1 再切回 Tab2 后，笔记详情页面将空白，效果如下：

可以通过索引路由填补空白，具体只需：

如此当我们重复上述操作时便会呈现如下效果：

当父路由匹配，但其他子路由都不匹配时，由索引路由匹配。索引路由是父路由的默认子路由。
当用户尚未单击导航列表中的一项时，会呈现索引路由。

与 Link 功能一致，差异是可以设置点击后的颜色

搜索参数类似于 URL 参数，形如 /login?success=1

随着我们输入 apple , 路由的地址将变为 /Tab2?text=apple 触发路由重新呈现。

当我们在输入框输入字符时，便会触发列表的过滤显示：

上述UI在交互过程中，当我们点击 Tab1 和 Tab2 进行切换时，或者点击 apple 或 appet 时，会出现输入框被清空，且列表不再被过滤的问题。

react-router 提供了 useLocation 方法，它返回浏览器显示的 url 信息。通过它可以获取浏览器 url 中的搜索参数，从而进行暂存，在具体组件内，可以通过 useSearchParams 获取到暂存的值。具体方式，通过自定义组件包装 NavLink 或 Link 来实现。

上述示例中，路由的切换采用 Link 或者 NavLink ，但当我们的页面元素不使用 Link 时，比如使用 Button ，此时便需要使用采用 useNavigate 。同上可以配合 useLocation 保存搜索字段。

https://reactrouter.com/docs/en/v6/getting-started/tutorial

React开发中使用react-router-dom路由最新版本V5.1.2路由嵌套子路由

在v4+中路由规则位于布局和 UI 本身之间，因为route本身也是一个组件，万物皆组件，所以我们要嵌套路由直接在组件里写就可以了

看代码，新建一个list.jsx，然后再建两个子组件mobile和pc

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Route,
  NavLink
} from "react-router-dom";
import Mobile from ‘./lists/Mobile‘;
import Pc from ‘./lists/Pc‘;
import ‘./home.css‘;
export default class List extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <ul>
            <li><NavLink to="/list/app" activeClassName="selected">手机端</NavLink></li>
            <li><NavLink to="/list/pc" activeClassName="selected">PC端</NavLink></li>
          </ul>
          <hr />
          <Switch>
            <Route strict path="/list/app" component={Mobile}/>
            <Route strict path="/list/pc" component={Pc}/>
            {/* <Route component={()=><div>子路由的404！</div>}/> */}
          </Switch>
        </div>
      </Router>
    );
  }
}

　mobile

import React from ‘react‘;
export default class Mobile extends React.Component {
  render() {
    return (
      <div>
        进入手机端
      </div>
    )
  }
}

　　pc的代码

import React from ‘react‘;
export default class Pc extends React.Component {
  render() {
    return (
      <div>
        加入电脑pc模式
      </div>
    )
  }
}

　　看效果