React JS 路由器 - Shell/Bash

React JS 路由器是一个非常强大的工具，它可以让我们在 React 应用程序中使用路由来管理页面。React 路由器提供了一些非常好的功能，如声明式路由，代码分割和动态加载，这使得我们可以轻松地组织代码和优化性能。

安装

使用以下命令来安装 React 路由器：

npm install --save react-router-dom

使用

在你的 React 应用程序中，你可以使用以下代码来设置一个基本的路由器：

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Home from './Home';
import About from './About';

function App() {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </BrowserRouter>
  );
}

在上面的代码中，我们首先从 react-router-dom 导入了 BrowserRouter，Switch 和 Route。然后，我们使用 <BrowserRouter> 组件将整个应用程序包裹起来，并在 <Switch> 组件中定义我们的路由。

在 <Switch> 中，我们定义了两个路由：一个是根路径（/），另一个是 /about。对于每一个路由，我们都定义了一个 component 属性，它表示这个路由对应的组件。在这个例子中，我们有两个组件：Home 和 About。

声明式路由

React 路由器的一个非常好的功能是声明式路由。它允许我们用一种类似于声明式的方式来定义我们的路由。

例如，如果我们想要定义一个带有参数的动态路由，我们可以这样写：

<Route path="/users/:id" component={Users} />

在这个例子中，我们使用 :id 来表示一个动态参数。当用户访问 /users/123 时，我们可以通过 this.props.match.params.id 来获取参数的值。

代码分割和动态加载

React 路由器也支持代码分割和动态加载，这意味着我们可以根据需要加载页面组件，而不必在一开始将所有组件都加载到页面上。

例如，我们可以在异步加载组件时使用 React.lazy() 和 Suspense：

import React, { lazy, Suspense } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';

const Home = lazy(() => import('./Home'));

function App() {
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loading...</div>}>
        <Switch>
          <Route exact path="/" component={Home} />
        </Switch>
      </Suspense>
    </BrowserRouter>
  );
}

在上面的代码中，我们首先使用 import() 异步加载了 Home 组件。然后，我们使用 React.lazy() 包装了我们的组件。

在 组件中，我们设置了一个 fallback 属性，它表示组件还没有加载完成时要显示的内容。在这个例子中，我们将加载显示一个简单的“Loading...”文本。

结语

React JS 路由器是一个非常有用的工具，它让我们可以在应用程序中轻松使用路由。React 路由器提供了很多功能，例如声明式路由，代码分割和动态加载。如果你想要了解更多信息，请查看官方文档。