React 中如何使用 React Router？

推荐答案

在 React 中使用 React Router 的基本步骤如下：

1. 安装 React Router： 首先，你需要安装 react-router-dom 包。你可以使用 npm 或 yarn 来安装它。

   npm install react-router-dom

   或者

   yarn add react-router-dom

2. 设置路由： 在你的 React 应用中，你可以使用 BrowserRouter 或 HashRouter 来包裹你的应用。然后使用 Route 组件来定义路由。

   // www.javascriptcn.com code example
   import React from 'react';
   import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
   import Home from './Home';
   import About from './About';
   import NotFound from './NotFound';
   
   function App() {
     return (
       <Router>
         <Switch>
           <Route exact path="/" component={Home} />
           <Route path="/about" component={About} />
           <Route component={NotFound} />
         </Switch>
       </Router>
     );
   }
   
   export default App;

3. 导航： 你可以使用 Link 组件来创建导航链接。

   // www.javascriptcn.com code example
   import React from 'react';
   import { Link } from 'react-router-dom';
   
   function Navbar() {
     return (
       <nav>
         <Link to="/">Home</Link>
         <Link to="/about">About</Link>
       </nav>
     );
   }
   
   export default Navbar;

4. 动态路由： 你可以使用 :param 来定义动态路由，并通过 useParams 钩子来获取参数。

   // www.javascriptcn.com code example
   import React from 'react';
   import { Route, useParams } from 'react-router-dom';
   
   function User() {
     let { userId } = useParams();
     return <div>User ID: {userId}</div>;
   }
   
   function App() {
     return (
       <Router>
         <Route path="/user/:userId" component={User} />
       </Router>
     );
   }

本题详细解读

1. React Router 的作用

React Router 是一个用于在 React 应用中实现路由功能的库。它允许你在单页面应用（SPA）中实现页面之间的导航，而无需重新加载整个页面。

2. 核心组件

• BrowserRouter：使用 HTML5 的 history API 来保持 UI 和 URL 的同步。
• HashRouter：使用 URL 的 hash 部分（即 #）来保持 UI 和 URL 的同步。
• Route：用于定义路由规则，当 URL 匹配时渲染相应的组件。
• Switch：用于包裹多个 Route 组件，确保只渲染第一个匹配的 Route。
• Link：用于创建导航链接，点击后不会重新加载页面。
• useParams：用于获取动态路由中的参数。

3. 动态路由

动态路由允许你在 URL 中传递参数，例如 /user/123，其中 123 是用户的 ID。你可以通过 :param 来定义动态路由，并通过 useParams 钩子来获取这些参数。

4. 嵌套路由

React Router 还支持嵌套路由，允许你在一个组件中定义子路由。你可以使用 Route 组件在父组件中定义子路由。

// www.javascriptcn.com code example
function App() {
  return (
    <Router>
      <Route path="/dashboard" component={Dashboard} />
    </Router>
  );
}

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <Route path="/dashboard/profile" component={Profile} />
      <Route path="/dashboard/settings" component={Settings} />
    </div>
  );
}

5. 重定向

你可以使用 Redirect 组件来实现页面重定向。

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

function ProtectedRoute({ isAuthenticated, ...props }) {
  return isAuthenticated ? <Route {...props} /> : <Redirect to="/login" />;
}

6. 编程式导航

你可以使用 useHistory 钩子来实现编程式导航。

// www.javascriptcn.com code example
import { useHistory } from 'react-router-dom';

function LoginButton() {
  let history = useHistory();

  function handleLogin() {
    // 登录逻辑
    history.push('/dashboard');
  }

  return <button onClick={handleLogin}>Login</button>;
}

通过这些步骤和组件，你可以在 React 应用中轻松实现路由功能。