反应JS | 路由器

React Router是React中最受欢迎的路由库之一。它提供了一种简单易用的方式来实现单页Web应用程序中的导航和路由。在本文中，我们将了解React Router的基本概念和用法。

安装

使用npm安装React Router：

npm install react-router-dom

基础用法

配置路由

使用React Router，我们可以将路由配置为组件树。

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">主页</Link>
            </li>
            <li>
              <Link to="/about">关于我们</Link>
            </li>
            <li>
              <Link to="/contact">联系我们</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </div>
    </Router>
  );
}

在上面的例子中，我们定义了三个路由：主页，关于我们和联系我们。我们使用<Link>组件定义了一个导航菜单。

在<Route>中，我们使用了"path" prop来指定路由的路径。"exact" prop用于确保只有匹配"/"路径的路由才会被呈现。"component" prop指定了对应的组件。

渲染组件

当路由被匹配时，React Router将渲染指定的组件。因此，在上面的代码中，我们需要定义三个组件：Home，About和Contact。

function Home() {
  return <h2>欢迎来到主页！</h2>;
}

function About() {
  return <h2>关于我们</h2>;
}

function Contact() {
  return <h2>联系我们</h2>;
}

高级用法

嵌套路由

React Router支持子路由。这允许我们在一个组件内定义子路由，以便在父组件中呈现子组件。

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">主页</Link>
            </li>
            <li>
              <Link to="/about">关于我们</Link>
            </li>
            <li>
              <Link to="/contact">联系我们</Link>
            </li>
            <li>
              <Link to="/topics">主题</Link>
            </li>
          </ul>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route path="/topics" component={Topics} />
      </div>
    </Router>
  );
}

function Topics({ match }) {
  return (
    <div>
      <h2>主题</h2>
      <ul>
        <li>
          <Link to={`${match.url}/rendering`}>渲染</Link>
        </li>
        <li>
          <Link to={`${match.url}/components`}>组件</Link>
        </li>
        <li>
          <Link to={`${match.url}/props-v-state`}>属性 vs 状态</Link>
        </li>
      </ul>

      <Route path={`${match.path}/:topicId`} component={Topic} />
      <Route
        exact
        path={match.path}
        render={() => <h3>请选择一个主题。</h3>}
      />
    </div>
  );
}

function Topic({ match }) {
  return <h3>{match.params.topicId}</h3>;
}

在上面的例子中，我们定义了一个名为Topics的组件，它定义了一个路由并呈现一个子路由。当我们点击“主题”时，我们将呈现一个/topics的路径。主题路由在Topics组件中定义，它包含了子路由："rendering"、"components"和"props-v-state"。当我们点击其中任何一个主题时，我们将渲染一个Topic组件。

导航

React Router提供了一些方法来进行导航。例如，我们可以使用内置的<Link>组件来创建一个链接，它将自动处理路由的跳转。我们也可以使用编程方式进行导航，例如：

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

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

  function handleClick() {
    history.push("/home");
  }

  return <button onClick={handleClick}>返回主页</button>;
}

在上面的例子中，我们在组件中使用了useHistory hook。当按钮被点击时，我们将使用history.push()方法来将路由设置为“/home”。

结论

React Router是一个非常流行的路由库，用于实现单页Web应用程序中的导航和路由。它非常易于使用，支持嵌套路由、导航等功能。在本文中，我们了解了React Router的基础用法和一些高级用法。