反应路由器 dom v6 - JavaScript

React Router是React的一部分，它是React开发中的一个必要工具，可以帮助你构建SPA（单页应用程序）。React Router能解决诸如URL路由、code splitting和面包屑导航等问题。在React Router 6版本中，有一些改动和新增的特性，本文将介绍捕捉这些变化所需要的知识。

安装

React Router6安装很简单，你只需要执行以下命令即可：

npm install react-router-dom

基本使用

React Router提供了多种路由方式，包括BrowserRouter、HashRouter、MemoryRouter等。以下是BrowserRouter例子：

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

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

上面这段代码将渲染三个Route组件，每个组件都带有一个path属性和一个element属性。当用户访问某个path路径时，将显示相关的element。

路由参数

在React Router中，可以使用路由参数来传递数据。以以下代码片段为例：

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/users" element={<Users />}>
          <Route path=":id" element={<UserDetails />} />
        </Route>
      </Routes>
    </Router>
  );
}

在Users组件中的Route中，使用了路由参数:id。这个参数将在UserDetails组件中用到。

嵌套路由

在React Router v6中，可以在Route组件中嵌套子路由。以下是一个例子：

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/users" element={<Users />}>
          <Route path="/" element={<UserList />} />
          <Route path=":id" element={<UserDetails />} />
        </Route>
      </Routes>
    </Router>
  );
}

浏览器访问 /users 时，将渲染UserList组件。访问 /users/1 时，将渲染UserDetails组件。

钩子函数

React Router v6支持了新的钩子函数来代替v5版本中的生命周期函数。以下是所有钩子函数的列表：

• useRoutes
• useNavigate
• useParams
• useLocation
• useMatch

代码示例：

import { useNavigate } from 'react-router-dom';

function LoginButton() {
  const navigate = useNavigate();

  function handleClick() {
    navigate('/dashboard');
  }

  return (
    <button onClick={handleClick}>
      Login
    </button>
  );
}

结论

React Router v6使得管理React应用的路由变得更加容易。相对于之前的版本，它的改进和增强更加容易上手。上文只是对其基本用法和一些例子的介绍，在实际开发中还有更多细节需要注意。