首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在React中使用exact到组件的多路由

,可以通过使用React Router库来实现。React Router是一个用于构建单页应用的常用库,它提供了一种在React应用中实现路由功能的方式。

在React Router中,可以使用exact属性来精确匹配路由。当exact属性设置为true时,只有当路径完全匹配时才会渲染对应的组件。

以下是一个示例代码,演示了如何在React中使用exact到组件的多路由:

代码语言:txt
复制
import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const Home = () => <h2>Home</h2>;
const About = () => <h2>About</h2>;
const Contact = () => <h2>Contact</h2>;

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
            <li>
              <Link to="/contact">Contact</Link>
            </li>
          </ul>
        </nav>

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

export default App;

在上述代码中,我们使用了exact属性来确保只有当路径完全匹配时才会渲染对应的组件。例如,当访问/about时,只有About组件会被渲染,而不会同时渲染Home组件。

这种方式适用于需要在React应用中实现多个路由,并且需要确保只有一个组件被渲染的情况。例如,当我们在一个导航栏中有多个链接,每个链接对应一个不同的组件时,我们可以使用exact属性来确保只有当前路径匹配的组件被渲染。

腾讯云提供了一系列与云计算相关的产品,包括云服务器、云数据库、云存储等。您可以根据具体需求选择适合的产品来支持您的React应用。具体产品介绍和链接地址可以参考腾讯云官方网站:https://cloud.tencent.com/

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

React Native优雅使用iconfont

React Nativeiconfont 关于React Native中使用iconfont,网上已有很多非常好解决方案,用最多就是react-native-vector-icons , 这个库支持很多常用...IconFont使用原理 其实IconFont就是一些文字,通过web上使用,我们可以大概猜出使用方法: 指定字体集 把对应16进制码当成文字写到文本 React Native同样如此,我们可以通过...; 指定字符集; return ({glyph}{this.props.children}); 把Unicode字符写到Text组件。...实际上,一个字体通常由数个表(table)构成,字体信息存储。...,需要引入字体文件: Android: 把字体文件拷贝[project root]/android/app/src/main/assets/fonts/ iOS: 把字体文件拖到对应Xcode工程里面

15.1K40

React路由

为了有效使用单个页面来管理原来页面的功能,前端路由应运而生。...前端路由功能:让用户从一个视图(页面)导航另一个视图(页面) 前端路由是一套映射规则,React,是 URL路径 与 组件 对应关系 使用React路由简单来说,就是配置 路径和组件(配对)..."/first">页面一 页面二 使用Route指定路由规则 // 在哪里写Route,最终匹配到组件就会渲染这 <Route path...Route包裹在一个Switch组件 Switch组件,不管有多少个路由规则匹配到了,都只会渲染第一个匹配组件 通过Switch组件非常容易就能实现404错误页面的提示 嵌套路由配置 React,配置嵌套路由非常简单,因为Route

1.9K20

React第三方组件1(路由管理之Router使用①简单使用)

1、React第三方组件1(路由管理之Router使用①简单使用)---2018.01.22 2、React第三方组件1(路由管理之Router使用②多层级跳转及重定向)---2018.01.23...3、React第三方组件1(路由管理之Router使用③传参)---2018.01.24 4、React第三方组件1(路由管理之Router使用④按需加载-上)---2018.01.25 5、React...第三方组件1(路由管理之Router使用⑤按需加载-下)---2018.01.26 开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2 今天我们讲下...先来看下我们之前文件 ? 大家可能会奇怪为什么每个Index.jsx文件,都这么写,其实你可以不这么写,我只是为了预留给将来用react-router使用!...exact :精确匹配 如果你组件需要传值,就得返回这个组件: }/> 不需要传值就直接这样写

1.7K30

React Router入门指南(包括Router Hooks)

React是一个用于构建用户界面的JavaScript库。我们还可以借助React Router将其扩展为构建页应用程序。这是一个第三方库,可在我们React应用程序启用路由。...本教程,我将介绍使用React Router入门所需一切。...某些情况下,提供这样路由是完全可以,但请想象一下,当我们需要处理真实组件时,使用render可能不是正确解决方案。 那么,我们该如何显示一个真实组件呢?...为了获得React Router全部功能,我们需要有多个页面和链接可以使用。我们已经有了页面(如果需要,也可以使用组件),现在,让我们添加一些链接以能够页面之间进行切换。...到目前为止,我们已经做了很多工作,但是,某些情况下,我们不想使用链接在页面之间导航。 有时,我们必须等待操作完成才能导航下一页。 让我们在下一部分处理这种情况。

12K20

React Router v4教程:为你 React 应用创建路由

那么你认为这是怎样实现呢?程序添加路由器可以解决这一需求。 React 路由 这将把我们带到本文主题:React Router v4。... React Conf 2017 演讲,他们通过展示如何将路由概念无缝地从 Web 平台投射到 Native 平台,以及将 React Router 集成 VR 并在 React Native... React 路由查看每个组件历史记录,当历史记录发生任何变化时,组件会重新渲染。 Router v4 之前,我们必须手动设置 History 值。...用 exact 取代 IndexRoute: 无需使用 IndexRoute 呈现 HomePage,你会注意前面代码片段 exact 属性。...这是 React Router v4 声明 性质一个例子。 v4 路由为 inclusive 意味着可以同时呈现多个路由。我们使用 exact 属性来解决匹配问题。

2K20

React进阶篇(九)React Router

路由React Router通过 Router和Route两个组件完成路由功能。 Router:路由器。一个应用只需要一个Router。 Route:路由配置。其为Router组件。.../some/path 使用BrowserRouter,需要对服务器进行配置,让服务器能处理所有可能正确URL(需要服务器返回SPA应用唯一HTML页面) HashRouter:使用URLHash...路由配置 path:用来描述这个Route匹配URL路径 match:当URL和Route匹配时,Route会创建一个match对象作为props一个属性传递给被渲染组件。...Route渲染组件 方式一:component 方式二:render(可以向组件传递额外属性;每次路由都会创建新组件) <Route...嵌套路由 Route渲染组件内部定义新Route。

3K20

React路由React 路由中核心组件

文章目录 React 路由 前端路由 React Router 基于 Web React Router react-router-dom 核心组件 Router组件 Route 组件 exact...React Router React项目中使用 React Router 库 React Router 提供了多种不同环境下路由库 Web native 基于 Web React...exact 属性 exact 属性表示路由使用 精确匹配模式,非 exact 模式下 ‘/’ 匹配所有以 ‘/’ 开头路由 component 属性 component 属性传递props...props 会直接注入 路由组件 props 属性 # 比如 下面这种直接写路由组件方式 /.../ 这种方式会直接把路由相关信息注入 About props 属性, About可以直接用props接收 动态路由 为了能给处理上面的动态路由地址访问,我们需要为 Route 组件配置特殊

1.4K20

React Router 邦邦两拳🥊 🥊

path2'); 导航栏 传统 使用react或Vue这种脚手架框架之前。我之前写过boostarp导航栏,左侧导航栏是要在每个文件中都写一次。然后选中那页tab状态样式是选中样式。...React Router 分类 react组件主要分为三类: 路由器 和 路由匹配器,和(v6是<Routes...例如:Link组件,会渲染一个a标签,Link组件源码a标签行BrowserRouter和HashRouter组件,前者使用pushState和popState事件构建路由,后者使用window.location.hash...BrowserRouter 常规URL HashRouter 将当前位置存储URL哈希部分,因此URL总会有个#井号,新建项目大部分是使用这种路由。...而加了exact后就会精准匹配。 导航 Link Link组件用于取代元素,生成一个链接,允许用户点击后跳转到另一个路由。它基本上就是元素React 版本,可以接收Router状态。

3.4K20

版本 Python 使用灵活切换

今天我们来说说 windows 系统上如果有版本 python 并存时,如何优雅进行灵活切换。...虽然 Python3 已经出来很久了,虽然 Python2 即将成为历史了,但是因为历史原因,依然有很多公司老项目继续使用着 Python2 版本(切换成本太高),所以大多数开发者机器上 Python2...和 Python3 都是并存,本文主要说明这种情况下如何便捷 Python2 和 Python3 之间进行切换。...设置环境变量 然后分别把对应版本安装路径加入系统环境变量中去: ?...补充说明 补充说明下,其实网上也有网友提供了其他两种方法: 使用 Python 自带 py -2 和 py -3 命令; 另一种和我上面说类似,但是只重命名了其中一个版本执行文件名; 如果机器只安装了两个版本

2.3K40

react-router 使用与优化

react-router 可以创建单页应用。可以将组件映射到路由上,将对应组件渲染想要渲染位置(根据路径变化渲染出组件)。...Route exact 属性表示只有 path 完全匹配时才渲染对应组件,上面例子,如果没有 Switch 组件exact 属性时,当访问 /123 路由页时,/ 路由也会匹配到,因为 /... Route 组件除了使用 component 指定一个组件外,还可以使用 render 函数,这个函数返回一个 React 组件,表示路由要渲染内容: <Route exact path="/"...没有通过路由绑定组件,props 是没有路由信息,可以使用 withRouter 函数来让组件获得路由信息。 当一个组件不是通过路由跳转而展示出来时,这个组件 props 上就没有路由信息。... ES 标准,有一个 import 异步加载模块语法,可以做到这一点。只是使用时需要下载有关包,因为不兼容。 create-react-app 已经集成了这一功能。

3.2K10

react项目实战教程(react项目实战)

文章目录 项目实战前准备工作 React项目实战(一) React项目实战(二) 搭建项目的基本页面及外层路由 1-1配置基本页面 1-2配置路由 1-3需要最外层去渲染路由视图 1-4需要配置内层App...路由 1-5 路由懒加载 项目实战前准备工作 React基础 React组件 React-Router——Reac路由学习 React高阶组件及CRA定制 React使用Antd组件...React项目实战(一) React项目实战(二) 搭建项目的基本页面及外层路由 1-1配置基本页面 项目根目录src文件下创建views文件夹 然后views文件夹里创建所需要页面,...ArticleEdit内容 解决方法,直接在routes/index.js里面添加一个标志exact然后遍历路由时候判断是否要添加exact属性 { pathname...路由懒加载 下载react-loadable 通过yarn add react-loadable安装 npm官网搜索查阅使用方法 并新建src/component/loading/

2.5K50

React-Router-手动路由跳转

前言手动路由跳转是React Router中一个重要概念,它允许您在React应用程序通过编程方式控制路由导航,而不是依赖于用户交互操作。...您将学习如何使用React Router提供useHistory或useNavigate钩子(或者类似的方法,取决于您React Router版本)来获取路由导航函数,并如何在组件内部触发路由跳转...,我们更改 App.js 代码,组件当中进行广场路由手动路由跳转实现,首先看 Hash 模式跳转:import React from 'react';import Home from '....,只有通过路由创建出来组件才有 history 对象, 所以不能在根组件使用手动路由跳转,如果一个组件是通过路由创建, 那么系统就会自动给这个组件传递一个 history 对象,但是如果一个组件不是通过路由创建...方法, 那么这个方法就会通过路由将传入组件创建出来,如果一个组件使用路由创建, 那么这个组件必须包裹在 BrowserRouter, HashRouter

33830

彻底理清前端单页面应用(SPA)实现原理

传统页面应用构建方式: 纯服务端渲染,前后端不分离,使用jsp,jade,'ejs','tempalte'等技术在后台先拼接成对应HTML结构,然后转换成字符串,每个对应路由返回对应数据(文件...init 用来初始化路由 load 事件发生后刷新页面,并且绑定 hashchange 事件,当 hash 值改变时触发对应回调函数 开始使用: ...: history.pushState() 保留现有历史记录同时,将 url 加入历史记录。...对于一个应用而言,url 改变(不包括 hash 值得改变)只能由下面三种情况引起: 点击浏览器前进或后退按钮 点击 a 标签 JS 代码触发 history.push(replace)State...,所有的Router都去更新视图 每个Router组件,都去对比当前hash值和这个组件path属性,如果不一样,那么就返回null,·否则就渲染这个组件对应视图 History模式实现:

3K41

React路由

为了有效使用单个页面来管理原来页面的功能,前端路由应运而生 前端路由功能:让用户从一个视图(页面)导航另一个视图(页面),前端路由是一套映射规则,Reat是URL路径与组件对应关系,使用...组件包裹整个应用 使用Link组件作为导航菜单(路由入口) 使用Route组件配置路由规则和要展示组件路由出口) import React from 'react' import ReactDom..."; hash模式下#后边路径不会发给服务器,不会被包括 HTTP 请求,对后端完全没有影响,因此改变 hash 不会重新加载页面,处理相对路径方面的一些问题时,使用HashRouter可以解决...from匹配(可以用正则)时,才会重定向to属性指定路径 Redirectfrom属性如果没有,则默认是匹配所有的路径 exact 完全匹配 from;相当于 Route.exact。...我们创建组件是没有history对象Route组件渲染了自己创建组件,然后通过prop传了history进去。

2.5K10

React Router v4 完全指北

React Router 事实上是React官方标准路由库。当你一个视图React应用来回切换,你需要一个路由来管理那些URL。...那些习惯于页应用最终用户,期望一个SPA应该包含以下特性: 应用每个视图都应该有对应唯一URL用来区分视图。...由于我们所需要接触 , 以及其他React RouterAPI都只是组件,所以你可以非常方便React使用路由。 写在开头。...从第二个demo开始,我会将 App.js里面越来越多组件分成单独文件。 App组件,我们写了路由跳转逻辑。 路径与当前路径匹配,对应组件就会被渲染。...不像React Router之前版本,v4,一切就“只是组件”。而且,新设计模式也更完美的使用React构建方式来实现。

2.8K20

React使用 Storybook,构建强大自定义 UI 组件

使用Storybook,您可以使用您最喜欢框架快速创建UI组件,同时还提供一个整洁接口来处理每个组件。 Storybook是UI组件开发环境,它允许您在主应用程序之外环境创建和展示组件。...隔离构建组件:隔离开发可确保您只关注正在构建组件。你不需要考虑应用其他部分,因为你Storybook构建每个组件都在自己文件夹,那里有用于实现和测试文件。...事实上,Storybook会检测到你正在使用Create React App,并为你安装依赖项。这是有帮助,特别是如果你是一个初学者。 本教程,我们使用是Next.js。...React应用初始化Storybook 现在我们已经启动并运行了React应用程序,我们需要安装并设置Storybook本地实例。... React APP 中使用 story 要在React应用中使用这个故事,我们可以导入创建好Banner。在你Next.js安装,把jsx文件放到index.js文件夹

9.1K10

React第三方组件1(路由管理之Router使用③传参)

1、React第三方组件1(路由管理之Router使用①简单使用)---2018.01.22 2、React第三方组件1(路由管理之Router使用②多层级跳转及重定向)---2018.01.23...3、React第三方组件1(路由管理之Router使用③传参)---2018.01.24 4、React第三方组件1(路由管理之Router使用④按需加载-上)---2018.01.25 5、React...第三方组件1(路由管理之Router使用⑤按需加载-下)---2018.01.26 开发环境:Windows 8,node v8.9.1,npm 5.5.1,WebStorm 2017.2.2 今天我们讲下...我们要实现目标是给demo2-2 路由传递参数!然后TodoList下接收参数! 我们先用下 react-router-dom Link组件!...其中: pathname:路由地址 search:通俗一点讲就是url

97430
领券