基于BM1684的AI边缘服务器-模型转换，大模型一体机（二）-CFANZ编程社区

在这里插入图片描述

文章目录

React Router 是一个用于在 React 应用程序中处理路由的库，它允许你为不同的 URL 路径渲染不同的组件。以下是 React Router 的一些关键概念和用法：

核心概念

路由器（Routers）：
- BrowserRouter：使用 HTML5 的历史 API 来保持 UI 和 URL 的同步。
- HashRouter：使用 URL 的哈希部分来保持 UI 和 URL 的同步，适用于不支持 HTML5 历史API的环境。
路由（Routes）：
- Route：最基本的路由组件，它负责根据路径匹配并渲染对应的组件。
- Switch：渲染第一个与当前路径匹配的 <Route> 或 <Redirect>。
导航（Navigation）：
- Link：用于在应用程序内部创建链接，允许用户在不同页面间导航。
- NavLink：一个特殊版本的 <Link>，它会在匹配当前路径时为其添加样式属性。
- Redirect：用于重定向，将用户重定向到另一个路由。

基础用法

安装 React Router：

npm install react-router-dom

设置路由器：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
const App = () => (
  <Router>
    <Switch>
      <Route exact path="/" component={Home} />
      <Route path="/about" component={About} />
      <Route path="/contact" component={Contact} />
      // ...其他路由
    </Switch>
  </Router>
);

使用 Link 组件进行导航：

import { Link } from 'react-router-dom';
const Navbar = () => (
  <nav>
    <ul>
      <li>
        <Link to="/">Home</Link>
      </li>
      <li>
        <Link to="/about">About</Link>
      </li>
      <li>
        <Link to="/contact">Contact</Link>
      </li>
    </ul>
  </nav>
);

定义组件：

const Home = () => <div>Home Page</div>;
const About = () => <div>About Page</div>;
const Contact = () => <div>Contact Page</div>;

动态路由

动态路由允许你在 URL 中包含可变的部分，通常用于匹配特定的资源，如用户ID。

<Route path="/user/:userId" component={User} />

在 User 组件中，你可以通过 useParams 钩子获取 userId：

import { useParams } from 'react-router-dom';
const User = () => {
  const { userId } = useParams();
  return <div>User ID: {userId}</div>;
};

嵌套路由

在 React Router 中，你可以通过在父路由组件内部放置更多 <Route> 来创建嵌套路由。

const App = () => (
  <Router>
    <Switch>
      <Route path="/users" component={Users} />
      // ...其他路由
    </Switch>
  </Router>
);
const Users = () => (
  <div>
    <h1>Users</h1>
    <Route path="/users/:userId" component={User} />
  </div>
);

以上是 React Router 的一些基础知识和用法。React Router 提供了强大的功能，能够满足各种路由需求，并且它的 API 设计简洁，易于学习和使用。在实际项目中，你可能还会使用到高级特性，如路由守卫、代码分割等。