面向初学者的 React 路由-React Router的完整指南！

因此，您正在尝试学习React.js。也许您甚至已经在其中构建了几个简单的项目。无论您是新开发人员还是有一定经验的人，都可能会发现自己必须开发具有不同页面和路线的Web应用程序。那就是React Router发挥作用的时候。

什么是React Router？

React Router提供了一种在React或React Native应用程序中实现路由的简便方法。入门非常简单。在本指南中，我将解释如何在React应用程序中轻松实现路由。🚀

该项目的完整代码可以在我的GitHub上找到。

React安装React Router

为了开始使用路由，您需要安装react-router-domnpm软件包。可以通过发出以下命令来完成此操作：

npm install react-router-dom

做得好！现在，您已经安装了React Router，可以继续学习本教程的其余部分。

Creating️创建基本的应用程序结构

为了创建路由，您必须BrowserRouter从react-router-dom导入。导入Route以及Switch一起导入也是一个好主意BrowserRouter。

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

BrowserRouter与RouterReact中一样，这是导入的标准做法。

要创建路由，您需要将App.js内的所有内容包装在<Router>标记中。这确保了您的路线将可在整个应用程序中访问。

现在，您的App.js结构将开始看起来像这样：

1import React from "react";
2import { BrowserRouter as Router, Route} from "react-router-dom";
3const App = () => {
4  return (
5    <Router>
6      <div>
7        {/* Your routes will go here */}
8      </div>
9    </Router>
10  );
11};
12export default App;

📍定义路线

为了实际定义路线，您将使用<Route>标签。<Route>接受2个参数，即path和component。该path是你希望你的路线走，而且component是阵营组件要渲染路线。

让我们创建两个组件，一个Home和一个About组件。

About.js

1import React from "react";
2const About = () => {
3  return (
4    <div className="p-3">
5      <p className="h5">About Component! 📢</p>
6    </div>
7  );
8};
9export default About;

Home.js

1import React from "react";
2const Home = () => {
3  return (
4    <div className="p-3">
5      <p className="h5">Home Component! 👨‍💻</p>
6    </div>
7  );
8};
9export default Home;

现在让我们定义路线如下：

1import React from "react";
2import { BrowserRouter as Router, Route} from "react-router-dom";
3const App = () => {
4  return (
5    <Router>
6      <div>
7        <Route path="/" component={Home} />
8        <Route path="/about" component={About} />
9      </div>
10    </Router>
11  );
12};
13export default App;

伟大的！现在尝试运行该应用程序。

您会在这里注意到一个问题。导航至/about路线时，您将同时看到About和Home渲染的组件。

替代文字

为什么会这样呢？🤨

原因是，当您导航至/about路线时，两条路线均以开头，因此两条路线都匹配/。react-router默认情况下，即使匹配了一条路由，它也会尝试匹配所有路由。因此，我们看到两个组件都显示在屏幕上。

为了解决此问题，您需要将路线包装在<Switch>标记内。

通过导入开始Switch从react-router-dom：

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

然后将您的路线包装在<Switch>标记内，如下所示：

1const App = () => {
2  return (
3    <Router>
4      <div className="h-100">
5        {/* switch to stop matching after match found */}
6        <Switch>
7          <Route path="/" component={Home} />
8          <Route path="/about" component={About} />
9        </Switch>
10      </div>
11    </Router>
12  );
13};

将<Switch>只会渲染路径匹配的第一个组件。一旦路由匹配，它就不会尝试寻找另一条匹配的路由。因此，您的组件将正确呈现。

现在尝试运行该应用程序并观察差异。

我们还有另一个问题！🚨

即使导航到/about路线，您仍会看到正在渲染的home组件。

替代文字

这是为什么？😣

原因是我的两条路线都始于/。因此，一旦匹配了本地路由，因为我们正在使用<Switch>，react-router就不会尝试匹配第二条路由。而且该Home组件将在任何情况下都呈现。

为了解决此问题，您可以执行以下两项操作之一。将Home组件的路线移至底部。

1<Router>
2  <div className="h-100">
3    {/* switch to stop matching after match found */}
4    <Switch>
5      <Route path="/about" component={About} />
6      {/* More routes will go here */}
7      <Route path="/" component={Home} />
8    </Switch>
9  </div>
10</Router>

如果您不想严格匹配确切的路线，这很有用。因此，即使说您的用户转到/about/me该About组件也将被渲染。像这样：

替代文字

但是，如果要严格匹配所有已定义的路由，则可以使用exact关键字。这样可以确保路由器将匹配整个路径，并且仅呈现具有与路由定义完全相同的路径的组件。

1<Router>
2  <div className="h-100">
3    {/* switch to stop matching after match found */}
4    <Switch>
5      <Route path="/" exact component={Home} />
6      <Route path="/about" component={About} />
7    </Switch>
8  </div>
9</Router>

现在，您应该在屏幕上看到正确的组件。🙌

因此，您可以在<Switch>标记内以相同的方式定义所需数量的路由：

via通过 `Link`

现在，您已经创建了路由，可以在应用程序中使用它们了。为了使用任何路线，您可以使用Linkfrom react-router-dom。

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

并按如下所示使用它：

1<Link to="/about">
2  About
3</Link>

该to是你想要的链接，进入的路径。单击链接后，/about将立即点击路线并About渲染组件。

在继续进行之前，让我们创建几个组件，以便我们可以在Navbar中开始使用它们。随意复制粘贴这些组件的代码。整个项目也可以在我的GitHub上找到。

Contact.js

1import React from "react";
2const Contact = () => {
3  return (
4    <div className="p-3">
5      <p className="h5">Contact Component! 📪</p>
6    </div>
7  );
8};
9export default Contact;

Posts.js

1import React from "react";
2const Posts = () => {
3  return (
4    <div className="p-3">
5      <p className="h5">Posts Component! 🦄</p>
6      <p>View specific posts at posts/id</p>
7    </div>
8  );
9};
10export default Posts;

Post.js

1import React from "react";
2const Post = () => {
3  return (
4    <div className="p-3">
5      <p className="h5">Post Number: 5 🦉</p>
6    </div>
7  );
8};
9export default Post;

最后，我们现在可以创建导航栏，并用于Link在不同的路线之间切换。

1import React from "react";
2import { Link } from "react-router-dom";
3const Navbar = () => {
4  return (
5    <nav className="navbar navbar-expand-sm navbar-dark bg-dark">
6      <Link className="navbar-brand" to="/">
7        React Router
8      </Link>
9      <button
10        className="navbar-toggler"
11        type="button"
12        data-toggle="collapse"
13        data-target="#navbarNavAltMarkup"
14        aria-controls="navbarNavAltMarkup"
15        aria-expanded="false"
16        aria-label="Toggle navigation"
17      >
18        <span className="navbar-toggler-icon"></span>
19      </button>
20      <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
21        <div className="navbar-nav">
22          <Link className="nav-item nav-link" to="/contact">
23            Contact
24          </Link>
25          <Link className="nav-item nav-link" to="/about">
26            About
27          </Link>
28          <Link className="nav-item nav-link" to="/posts">
29            Posts
30          </Link>
31        </div>
32      </div>
33    </nav>
34  );
35};
36export default Navbar;

在这里，我正在使用Bootstrap来设置导航栏的样式。

如果您在导航栏中使用链接（大多数情况下），则也可以使用NavLinkfrom react-router-dom。

Link和之间的区别NavLink是NavLink，您可以使用添加其他样式到链接。其中之一是activeClassName默认情况下应用的。它将在导航栏中突出显示选定的链接。

替代文字

很好，但是还有另一种方法可以访问应用程序中的路由。

那就是通过使用history对象。history可以通过任何组件内部的道具访问该对象。

1import React from "react";
2const Home = ({ history }) => {
3  return (
4    <div className="p-3">
5      <p className="h5">Home Component! 👨‍💻</p>
6    </div>
7  );
8};
9export default Home;

因此，为了更改路径，您可以使用history.push()。例如，为了更改按钮单击的路径，您可以执行以下操作：

1import React from "react";
2const Home = ({ history }) => {
3  return (
4    <div className="p-3">
5      <p className="h5">Home Component! 👨‍💻</p>
6      <button
7        className="btn btn-primary"
8        onClick={() => history.push("/about")}
9      >
10        About
11      </button>
12    </div>
13  );
14};
15export default Home;

在中history.push()，您可以指定要转到的路径，如上例所示。

⚡创建动态路线

为了使路由动态化，您可以使用URL参数并按以下方式定义路由：

<Route path="/posts/:id" component={Post} />

在此， :id表示路径可以动态更改并且可以占用任何字符串值。

现在，假设您要在react组件中访问该值。您可以通过使用match对象来实现。匹配项具有params可用于访问动态路径值的属性。可以通过道具访问匹配对象，类似于历史对象。

现在，我们将修改该Post组件以动态获取URL的值：

1import React from "react";
2const Post = ({ match }) => {
3  return (
4    <div className="p-3">
5      <p className="h5">Post Number: {match.params.id} 🦉</p>
6    </div>
7  );
8};
9export default Post;

此处match.params.id将包含在路径中指定的id值，如下所示：

替代文字

请注意，URL的值（即7）也在组件中呈现。因此，通过这种方式，您可以使路由动态化，并在React组件中访问URL参数。

⛔错误处理

最后，有关404在应用程序中创建路由的快速提示。您可以404如下定义错误的路由：

1{/* if does not match any route, then 404 route */}
2<Route path="/" component={Error} />

注意，这是与本国路线相同的路线，但是我们在末尾定义了该路线，更重要的是，我们省略了exact关键字。由于我们使用的是<Switch>标签，因此如果以上路线均不匹配，则该路线将每次都匹配，并显示我们为404路线创建的自定义组件。

这是一个实际的例子：

替代文字而且，这是最终产品：

替代文字

All那就是所有的人！

因此，几乎可以总结一下。我绝对不是专家，但是我想分享一个关于React Router基础知识以及如何在React应用程序中实现它的简单指南。

如果您有任何问题，请随时在评论中问我，我会尽力回答。如果您喜欢阅读本文，请给它一个❤或🦄或🔖。

面向初学者的 React 路由-React Router的完整指南！

什么是React Router？

React安装React Router

Creating️创建基本的应用程序结构

📍定义路线

About.js

Home.js

为什么会这样呢？🤨

我们还有另一个问题！🚨

这是为什么？😣

via通过 `Link`

Contact.js

Posts.js

Post.js

⚡创建动态路线

⛔错误处理

All那就是所有的人！

评论区

相关推荐

面向初学者的 React 路由-React Router的完整指南！

什么是React Router？

React安装React Router

Creating️创建基本的应用程序结构

📍定义路线

About.js

Home.js

为什么会这样呢？🤨

我们还有另一个问题！🚨

这是为什么？😣

via通过 Link

Contact.js

Posts.js

Post.js

⚡创建动态路线

⛔错误处理

All那就是所有的人！

评论区

相关推荐

via通过 `Link`