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

Souleigh ✨
• 阅读 1497

因此,您正在尝试学习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应用程序中实现它的简单指南。

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

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Karen110 Karen110
2年前
一篇文章带你了解JavaScript日期
日期对象允许您使用日期(年、月、日、小时、分钟、秒和毫秒)。一、JavaScript的日期格式一个JavaScript日期可以写为一个字符串:ThuFeb02201909:59:51GMT0800(中国标准时间)或者是一个数字:1486000791164写数字的日期,指定的毫秒数自1970年1月1日00:00:00到现在。1\.显示日期使用
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Stella981 Stella981
2年前
React:react
使用react构建单页面应用:  实现方法:(1)reactrouter       (2)reactrouterdomreactrouter:实现了路由的核心功能,而reactrouterdom依赖reactrouter,reactrouterdom:基于reactrouter,加入了在浏览器运行环境下的
Stella981 Stella981
2年前
React Router 4.x 开发,这些雷区我们都帮你踩过了
前言在前端框架层出不穷的今天,React以其虚拟DOM、组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的Javascript库。作为React体系中的重要组成部分:ReactRouter也成为开发者首选的路由库,其主要功能是通过管理url实现组件的切换和状态的变化。正文在ReactRouter
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
2年前
00:Java简单了解
浅谈Java之概述Java是SUN(StanfordUniversityNetwork),斯坦福大学网络公司)1995年推出的一门高级编程语言。Java是一种面向Internet的编程语言。随着Java技术在web方面的不断成熟,已经成为Web应用程序的首选开发语言。Java是简单易学,完全面向对象,安全可靠,与平台无关的编程语言。
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
2个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这