React 18 路由的配置与参数传递：终极指南

2024-02-14 16:25:29

React 18 路由配置

React 18 提供了多种路由配置方式，您可以根据自己的项目需求选择最合适的一种。

1. 使用 React Router

React Router 是一个流行的第三方路由库，它为 React 提供了一套完整的路由解决方案。

安装 React Router：

npm install react-router-dom

在 App.js 中配置路由：

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

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

在组件中使用路由：

import { Link } from "react-router-dom";

function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <Link to="/about">About</Link>
    </div>
  );
}

export default Home;

2. 使用内置的 `<Routes>` 和 `<Route>` 组件

React 18 内置了 <Routes> 和 <Route> 组件，您可以直接使用它们来配置路由。

在 App.js 中配置路由：

import { Routes, Route } from "react-router";

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/about" element={<About />} />
      <Route path="/contact" element={<Contact />} />
    </Routes>
  );
}

export default App;

在组件中使用路由：

import { Link } from "react-router-dom";

function Home() {
  return (
    <div>
      <h1>Home Page</h1>
      <Link to="/about">About</Link>
    </div>
  );
}

export default Home;

React 18 参数传递

在 React 18 中，您可以通过多种方式向路由组件传递参数。

1. 使用 URL 参数

// App.js
import { Routes, Route } from "react-router";

function App() {
  return (
    <Routes>
      <Route path="/user/:id" element={<User />} />
    </Routes>
  );
}

export default App;

// User.js
import { useParams } from "react-router-dom";

function User() {
  const { id } = useParams();

  return (
    <div>
      <h1>User Page</h1>
      <p>User ID: {id}</p>
    </div>
  );
}

export default User;

2. 使用查询参数

// App.js
import { Routes, Route } from "react-router";

function App() {
  return (
    <Routes>
      <Route path="/search" element={<Search />} />
    </Routes>
  );
}

export default App;

// Search.js
import { useLocation } from "react-router-dom";

function Search() {
  const location = useLocation();

  const query = new URLSearchParams(location.search);
  const keyword = query.get("keyword");

  return (
    <div>
      <h1>Search Page</h1>
      <p>Keyword: {keyword}</p>
    </div>
  );
}

export default Search;

3. 使用状态管理工具

您可以使用状态管理工具（如 Redux）将参数存储在全局状态中，然后在路由组件中使用这些参数。

// App.js
import { Routes, Route } from "react-router";
import { useSelector } from "react-redux";

function App() {
  const user = useSelector((state) => state.user);

  return (
    <Routes>
      <Route path="/user" element={<User />} />
    </Routes>
  );
}

export default App;

// User.js
import { useParams } from "react-router-dom";

function User() {
  const { id } = useParams();

  const user = useSelector((state) => state.user);

  return (
    <div>
      <h1>User Page</h1>
      <p>User ID: {id}</p>
      <p>User Name: {user.name}</p>
    </div>
  );
}

export default User;