5分钟了解 React Router

:)

React Router 是 React 的标准路由库。“React Router 可让您的 UI 与 URL 保持同步。它拥有简洁的 API，并内置了诸如延迟代码加载、动态路由匹配和位置转换处理等强大功能。阅读本文后，您将成为 React Router 的大师。那就让我们开始吧。”

如何使用它？

使用前，你需要安装 react-router-dom。打开命令行并安装。

npm i react-router-dom

安装完成后，现在我们需要导入一些东西。

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

导入后，我们需要用浏览器路由器包装整个应用，或者在你想使用路由器的地方，用它包装整个应用。现在在浏览器路由器中添加这个 switch 元素。

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

const App = () => {
  return (
    <>
      <BrowserRouter>
        <Switch>
          <Route />
        </Switch>
      </BrowserRouter>
    </>
  );
};
export default App;

}

现在我们可以创建路线。

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

const App = () => {
  return (
    <>
      <BrowserRouter>
        <Switch>
          <Route
            path="/"
            exact
            component={() => {
              return (
                <>
                  <h1>Hello I am the home page</h1>
                </>
              );
            }}
          />
        </Switch>
      </BrowserRouter>
    </>
  );
};
export default App;

正如您在这段代码中看到的，我创建了一个用于主页的路由，因为我们指定了路径“/”。然后，如果路径是“/”，那么它应该渲染什么内容呢？我已经在那里创建了一个组件。您也可以创建一个单独的组件，然后导入它，然后将其放入“component={here}”中。

让我们创建更多路线。

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

const App = () => {
  return (
    <>
      <BrowserRouter>
        <Switch>
          <Route
            path="/"
            exact
            component={() => {
              return (
                <>
                  <h1>Hello I am the home page</h1>
                </>
              );
            }}
          />
          <Route
            path="/about"
            component={() => {
              return (
                <>
                  <h1>I am from the about page.</h1>
                </>
              );
            }}
          />
          <Route
            path="/blog"
            component={() => {
              return (
                <>
                  <h1>I am from the blog page.</h1>
                </>
              );
            }}
          />
        </Switch>
      </BrowserRouter>
    </>
  );
};
export default App;

现在我已经创建了多条路由。现在我们只能在屏幕上看到主页。我们怎么才能看到其他页面呢？很简单！只需在页面 URL 后输入“about”，即可重定向到“about”页面。那么，为什么输入“/about”后会重定向到“about”页面呢？因为我们创建路由时指定了“about”路径。所以，当有人输入这个路径时，他/她都会被重定向到那里。所以，现在这还不算什么酷炫的东西 :(。现在我们将看到如何使用 React Router 创建一个很棒的导航。而且速度会非常快。所以，让我们创建一个“Nav”组件。:)

import React from "react";
import { Link } from "react-router-dom";

const Nav = () => {
  return (
    <>
      <Link to="/" exact>
        Home
      </Link>
      <Link to="/about" exact>
        About
      </Link>
      <Link to="/blog" exact>
        Blog
      </Link>
    </>
  );
};
export default Nav;

这就是我们的导航组件。这里没什么特别的。我只是从 react-router-dom 导入了“Link”元素。它接受一个 prop“to”，用于指定重定向到哪里。现在，让我们把它渲染到我们的 app 组件下。

import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Nav from "./Nav";

const App = () => {
  return (
    <>
      <Nav />
      <BrowserRouter>
        <Switch>
          <Route
            path="/"
            exact
            component={() => {
              return (
                <>
                  <h1>Hello I am the home page</h1>
                </>
              );
            }}
          />
          <Route
            path="/about"
            component={() => {
              return (
                <>
                  <h1>I am from the about page.</h1>
                </>
              );
            }}
          />
          <Route
            path="/blog"
            component={() => {
              return (
                <>
                  <h1>I am from the blog page.</h1>
                </>
              );
            }}
          />
        </Switch>
      </BrowserRouter>
    </>
  );
};
export default App;

现在我正在 app.js 中渲染 Nav 组件，但它显示错误，为什么！！！哈哈，因为我们在 Nav 中使用了 Link 元素，所以我们必须将 Nav 放在 BrowserRouter 下方，因为我们把这个路由器的路径放在了 Nav 中。放在 BrowserRouter 下方后，它应该就能正常工作了。:)

import React from "react";
import { BrowserRouter, Switch, Route } from "react-router-dom";
import Nav from "./Nav";

const App = () => {
  return (
    <>
      <BrowserRouter>
        <Nav />
        <Switch>
          <Route
            path="/"
            exact
            component={() => {
              return (
                <>
                  <h1>Hello I am the home page</h1>
                </>
              );
            }}
          />
          <Route
            path="/about"
            component={() => {
              return (
                <>
                  <h1>I am from the about page.</h1>
                </>
              );
            }}
          />
          <Route
            path="/blog"
            component={() => {
              return (
                <>
                  <h1>I am from the blog page.</h1>
                </>
              );
            }}
          />
        </Switch>
      </BrowserRouter>
    </>
  );
};
export default App;

好了，现在输出完美了 :)。不过最后还有个问题：我们如何知道现在在哪个页面？所以在这种情况下，我们应该使用 NavLink 而不是 Link，这样我们就会得到另一个名为“activeClassName”的额外属性。我们来做吧 :)。

import React from "react";
import { NavLink } from "react-router-dom";

const Nav = () => {
  return (
    <>
      <NavLink activeClassName="active" to="/" exact>
        Home
      </NavLink>
      <NavLink activeClassName="active" to="/about" exact>
        About
      </NavLink>
      <NavLink activeClassName="active" to="/blog" exact>
        Blog
      </NavLink>
    </>
  );
};
export default Nav;

我添加了一个活动类。它会在页面打开/加载时设置样式。所以，您可以根据自己的喜好来设置样式。

在路由中，我们使用 component 属性进行渲染。但我们还有另一个属性，那就是 render 属性。那么它的作用是什么呢？它会在页面加载完成后再次创建整个组件。

关于 React Router 的介绍就到这里，希望你喜欢。感谢阅读本文。如果你对我的文章有任何问题，请告诉我。记得关注我，以便收到所有类似的信息文章。

:)

文章来源：https://dev.to/developeratul/react-router-in-5-minutes-558e

5分钟学会 React Router :)

5分钟了解 React Router

:)

如何使用它？

:)