通过vue学习react(五) - 路由router

react router v6 版本的路由实现

喜欢就点赞呗

安装

pnpm add react-router-dom

完整代码

# App.tsx
function App() {
  return (
    <div className="App">
      <nav style={{ margin: 10 }}>
        <Link to="/" style={{ padding: 5 }}>
          Home
        </Link>
        <Link to="/about" style={{ padding: 5 }}>
          About
        </Link>
        <Link to="/list" style={{ padding: 5 }}>
          About
        </Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home txt="2333" />}></Route>
        <Route path="about" element={<About />}></Route>
        <Route path="*" element={<NoMatch />} />
        <Route path="list" element={<List />}>
          <Route path="/list" element={<ListLink />}></Route>
          <Route path=":id" element={<ListId />}></Route>
        </Route>
      </Routes>
      。
    </div>
  );
}

Api

方法	意义
useParams	返回当前参数 根据路径读取参数
useNavigate	返回当前路由 代替原有V5中的 useHistory
useOutlet	返回根据路由生成的element
useLocation	返回当前的location 对象
useRoutes	同Routers组件一样，只不过是在js中使用
useSearchParams	用来匹配URL中?后面的搜索参数

基本路由实现

其中Home, 和About的代码就不进行展示了

<Route path="/" element={<Home />}></Route>
<Route path="about" element={<About />}></Route>

则是定义路由

地址	组件
localhost:3000/	Home组件
localhost:3000/about	About组件

不过这些很快就能分清楚, 不过需要深入了解的是嵌套路由
下面的代码主要也是list为主

404路由

<Route path="*" element={<NoMatch />} />

当Routes中寻找不到的时候, 我们在最后一个路由中添加正则就可以指定404了

重定向

使用导航组件重定向

我们可以通过使用 React Router 的 Navigate 组件来执行声明性重定向。在下面的示例中，每当用户导航到"关于"页时，导航组件都将以声明方式执行重定向：

const About = () => {
  const shouldRedirect = true;

  return (
    <>
      <h2>About</h2>
      {shouldRedirect && <Navigate replace to="/home" />}
    </>
  );
};

如果我们想在路由级别对此进行管理，我们也可以使用以下替代解决方案：

# App.tsx
<Route
  path="about"
  element={
    shouldRedirect ? (
      <Navigate replace to="/home" />
    ) : (
      <About />
    )
  }
/>

使用重定向导航钩子

const About = () => {
  const shouldRedirect = true;

  const navigate = useNavigate();

  React.useEffect(() => {
    if (shouldRedirect) {
      navigate('/home');
    }
  });

  return (
    <>
      <h2>About</h2>
    </>
  );
};

每当组件呈现时，React 的 useEffect Hook 都会运行，并将以编程方式执行重定向。

嵌套路由(list)的实现

<Route path="list" element={<List />}>
  <Route path="/list" element={<ListLink />}></Route>
  <Route path=":id" element={<ListId />}></Route>
</Route>

上方代码主要组成是这样的,

当我们访问http://localhost:3000/list

<List>
 <ListLink></ListLink>
</List>

当我们访问http://localhost:3000/list/1

<List>
 <ListId />
</List>

完整代码

List.tsx

Outlet 嵌套路由类似 {children}

import { Outlet } from 'react-router-dom';
class List extends React.Component {
  constructor(props: React.FC) {
    super(props);
  }

  render() {
    return (
      <div style={{ padding: 20 }}>
        <h2>Blog</h2>
        <Outlet />
      </div>
    );
  }
}

ListLink.tsx

const lists = {
  "1": {
    title: "第一篇文章",
    desc: "test1",
  },
  "2": {
    title: "第二篇文章",
    desc: "test2",
  },
};

class ListLink extends React.Component {
  constructor(props: React.FC) {
    super(props);
  }

  render() {
    return (
      <ul>
        {Object.entries(lists).map(([key, { title }]) => (
          <li key={key}>
            <Link to={`/list/${key}`}>
              <h3>{title}</h3>
            </Link>
          </li>
        ))}
      </ul>
    );
  }
}

ListId.tsx

useParams 获取路由参数

export default function ListId() {
  const lists: Record<
    string,
    {
      title: string;
      description: string;
    }
  > = {
    "1": {
      title: "第一篇博客文章",
      description: "第一篇博客文章，是关于Vue3.0的",
    },
    "2": {
      title: "第二篇博客文章",
      description: "Hello React Router v6",
    },
  };

  const { id } = useParams();
  const blog = lists[id as string];
  const { title, description } = blog;
  return (
    <div style={{ padding: 20 }}>
      <h3>{title}</h3>
      <p>{description}</p>
    </div>
  );
}

路由统一管理及路由拦截方案

这篇文章已经写的很好了, 就不重复说明了
react-router v6 路由统一管理及路由拦截方案

参考

React Router v6 使用指南
React Router 6: Redirect