React18路由详解

作者：System 时间：2024年08月16日分类：所有,react native 字数：894

这篇文章距离上次修改已过266天，其中的内容可能已经有所变动。

React Router 6 是 React 18 中支持的版本。以下是如何在 React 18 项目中使用 React Router 6 的基本示例：

首先，确保安装了 React Router 6：

npm install react-router-dom

然后，你可以在你的应用中设置路由：

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users/:id" element={<User />} />
      </Routes>
    </BrowserRouter>
  );
}

function Home() {
  return <h2>Home</h2>;
}

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

function User() {
  // 使用 useParams 钩子获取动态路由参数
  let { id } = useParams();
  return <h2>User: {id}</h2>;
}

在这个例子中，我们使用 <BrowserRouter> 作为我们的路由器。每个 <Route> 定义了一条路由规则，element 属性用于渲染与该路由匹配的组件。动态路由参数可以通过 useParams 钩子获取。这是一个基本的路由设置，React Router 6 还支持更多高级特性，如路由嵌套、重定向等。

React18路由详解

评论已关闭

推荐阅读