React 路由：一文搞定

React 路由是一个强大的库，允许您轻松地在您的 React 应用程序中创建单页应用程序 (SPA)。它可以帮助您管理应用程序的不同页面，并使您能够在页面之间进行导航。

路由配置

在使用 React 路由之前，您需要先进行路由配置。您可以在您的 React 应用程序的根组件中进行路由配置。例如：

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

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

export default App;

在上面的代码中，我们首先导入了 BrowserRouter、Switch 和 Route 三个组件。然后，我们在 App 组件中创建了一个 BrowserRouter 实例，并将其作为根组件。在 BrowserRouter 实例中，我们创建了一个 Switch 组件，并将其作为根组件。在 Switch 组件中，我们创建了三个 Route 组件，分别对应着我们的主页、关于我们页和联系我们页。

Switch

Switch 组件用于匹配当前 URL 与哪个 Route 组件相匹配。当 Switch 组件找到与当前 URL 相匹配的 Route 组件时，它就会渲染该组件。

Route

Route 组件用于定义一个路由规则。每个 Route 组件都有一个 path 属性，用于指定该路由规则的路径。当当前 URL 与 Route 组件的 path 属性相匹配时，该 Route 组件就会被渲染。

Redirect

Redirect 组件用于将用户从一个 URL 重定向到另一个 URL。例如：

<Route path="/old-page" render={() => <Redirect to="/new-page" />} />

上面的代码将把所有访问 /old-page 的用户重定向到 /new-page。

Link

Link 组件用于在页面之间进行导航。例如：

<Link to="/about">关于我们</Link>

上面的代码会在页面上创建一个链接，当用户点击该链接时，他们就会被导航到 /about 页面。

useHistory

useHistory 钩子用于获取当前 URL 的信息。例如：

const history = useHistory();

const handleClick = () => {
  history.push("/about");
};

上面的代码获取当前 URL 的历史记录，然后使用 push 方法将 /about 页面添加到历史记录中。

useParams

useParams 钩子用于获取当前 URL 的参数。例如：

const params = useParams();

const id = params.id;

上面的代码获取当前 URL 的参数，然后使用 id 属性获取参数值。

结论

React 路由是一个强大的库，允许您轻松地在您的 React 应用程序中创建单页应用程序。通过使用 React 路由，您可以轻松地管理应用程序的不同页面，并使您能够在页面之间进行导航。