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

Souleigh ✨ 等级 93 0 0

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

什么是React Router?

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

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

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

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"; 

BrowserRouterRouterReact中一样,这是导入的标准做法。

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

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

import React from "react";
import { BrowserRouter as Router, Route} from "react-router-dom";
const App = () => {
  return (
    <Router>
      <div>
        {/* Your routes will go here */}
      </div>
    </Router>
  );
};
export default App; 

📍定义路线

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

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

About.js

import React from "react";
const About = () => {
  return (
    <div className="p-3">
      <p className="h5">About Component! 📢</p>
    </div>
  );
};
export default About; 

Home.js

import React from "react";
const Home = () => {
  return (
    <div className="p-3">
      <p className="h5">Home Component! 👨‍💻</p>
    </div>
  );
};
export default Home; 

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

import React from "react";
import { BrowserRouter as Router, Route} from "react-router-dom";
const App = () => {
  return (
    <Router>
      <div>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
};
export default App; 

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

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

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

为什么会这样呢?🤨

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

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

通过导入开始Switchreact-router-dom

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

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

const App = () => {
  return (
    <Router>
      <div className="h-100">
        {/* switch to stop matching after match found */}
        <Switch>
          <Route path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </div>
    </Router>
  );
}; 

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

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

我们还有另一个问题!🚨

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

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

这是为什么?😣

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

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

<Router>
  <div className="h-100">
    {/* switch to stop matching after match found */}
    <Switch>
      <Route path="/about" component={About} />
      {/* More routes will go here */}
      <Route path="/" component={Home} />
    </Switch>
  </div>
</Router> 

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

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

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

<Router>
  <div className="h-100">
    {/* switch to stop matching after match found */}
    <Switch>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </div>
</Router> 

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

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

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

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

并按如下所示使用它:

<Link to="/about">
  About
</Link> 

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

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

Contact.js

import React from "react";
const Contact = () => {
  return (
    <div className="p-3">
      <p className="h5">Contact Component! 📪</p>
    </div>
  );
};
export default Contact; 

Posts.js

import React from "react";
const Posts = () => {
  return (
    <div className="p-3">
      <p className="h5">Posts Component! 🦄</p>
      <p>View specific posts at posts/id</p>
    </div>
  );
};
export default Posts; 

Post.js

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

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

import React from "react";
import { Link } from "react-router-dom";
const Navbar = () => {
  return (
    <nav className="navbar navbar-expand-sm navbar-dark bg-dark">
      <Link className="navbar-brand" to="/">
        React Router
      </Link>
      <button
        className="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target="#navbarNavAltMarkup"
        aria-controls="navbarNavAltMarkup"
        aria-expanded="false"
        aria-label="Toggle navigation"
      >
        <span className="navbar-toggler-icon"></span>
      </button>
      <div className="collapse navbar-collapse" id="navbarNavAltMarkup">
        <div className="navbar-nav">
          <Link className="nav-item nav-link" to="/contact">
            Contact
          </Link>
          <Link className="nav-item nav-link" to="/about">
            About
          </Link>
          <Link className="nav-item nav-link" to="/posts">
            Posts
          </Link>
        </div>
      </div>
    </nav>
  );
};
export default Navbar; 

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

如果您在导航栏中使用链接(大多数情况下),则也可以使用NavLinkfrom react-router-dom

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

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

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

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

import React from "react";
const Home = ({ history }) => {
  return (
    <div className="p-3">
      <p className="h5">Home Component! 👨‍💻</p>
    </div>
  );
};
export default Home; 

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

import React from "react";
const Home = ({ history }) => {
  return (
    <div className="p-3">
      <p className="h5">Home Component! 👨‍💻</p>
      <button
        className="btn btn-primary"
        onClick={() => history.push("/about")}
      >
        About
      </button>
    </div>
  );
};
export default Home; 

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

⚡创建动态路线

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

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

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

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

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

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

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

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

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

⛔错误处理

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

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

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

这是一个实际的例子:

面向初学者的 React 路由-React Router的完整指南! 而且,这是最终产品:

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

All那就是所有的人!

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

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

收藏
评论区