React-router匹配的组件 如何使用?

最新推荐文章于 2022-07-07 01:40:26 发布
最新推荐文章于 2022-07-07 01:40:26 发布
阅读量127 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/zhongxia/p/5383948.html
版权

React-router 语法的使用

时间: 2016-04-12 19:18:26 作者:zhongxia
react-router 其实 是配置了一个 路由 和组件 之间的映射关系

  1. 当 location 的地址,和 react-router 配置的映射关系表里面 路径匹配上了,就返回对应的组件.

    NewImage

  2. 但是返回的组件如何使用呢? 大部分的使用方法是这样的.

    NewImage

           其实,还可以这样.使用 JSX的方式,来实现. 是不是很赞. 

           NewImage

 

            第二种方法,就很方便的在组件里面赋值上,我们需要的数据和方法. 不然如果是  {this.props.children} 这样的话,赋值数据到组件上就比较困难了.

 

 

 

转载于:https://www.cnblogs.com/zhongxia/p/5383948.html

helloxielan
关注
react-router-cache-route:使用类似React-Router的缓存进行路由在Vue
05-11
如果只想要<KeepAlive> ，请尝试React v15 + React-Router v4 +问题使用Route ，前进或后退时无法缓存组件，这会导致数据丢失和交互原因与解决方案Route不匹配时，组件将被卸载阅读源代码之后Route ，我们发现使用...
官方的js路由router
weixin_40945354的博客
02-09 1087
// 1. 定义路由组件. // 也可以从其他文件导入 const Home = { template: '<div>Home</div>' } const About = { template: '<div>About</div>' } // 2. 定义一些路由 // 每个路由都需要映射到一个组件。 // 我们后面再讨论嵌套路由。 const routes = [ { path: '/', component: HelloWorld }, { pa
React中路由组件的简单使用（5版本）
fps_ll的博客
07-02 436
因为包裹到这里其他组件无法使用,所以可以在App组件外包裹BrowserRouter,例如 之后其他组件只引入Link和Route即可;还有和Link组件一样的,NavLink和Link功能一样,但是NavLink能使选中的高亮配置activeClassName Switch的用法:就是跳转只有一个组件,其他组件不奏效 Redirect重定向 路由组件接收的this.props跟一般组件不一样 都用this.props接收数据withRouter能让普通组件中this.
React 路由匹配模式
m0_69507480的博客
07-07 531
React 路由匹配模式--添加Switch无效果
使用react-router进行多级路由匹配
zem
10-09 5890
在React-router学习笔记 react-router基本使用中，我做了精确的路由匹配，但是实际上，我们在进行路由匹配的时候，一般是会进行多级路由的匹配，所以这里说说如何进行多级路由的匹配 在使用react-router-dom的Link的时候，我们需要使用to来指定路由，而Route用来显示路由对应得内容，默认情况下，Route 会进行路由的模糊匹配 <Route path="/to...
react-router 路由匹配
onegoldensun的博客
07-28 3014
URL 类型 http://localhost:8080/#/listrepo?name=555&id=66666    值存在this.props.location.query中   url类型 http://localhost:8080/#/listrepo/555/66666      值存在this.props.params中
浅谈react-router@4.0 使用方法和源码分析
10-16
这里要注意的是，React Router v4中不再需要使用exact属性来严格匹配路径，因为组件已经默认处理了这一行为。 接下来是具体的配置示例。在引入React和React Router相关的组件后，我们可以创建一个router数组，其中...
使用React-Router实现前端路由鉴权的示例代码
11-20
React-Router 是React生态系统中的关键组件，用于在前端管理单页应用（SPA）的路由。在传统的Web应用中，路由通常由服务器控制，但随着SPA的流行，前端开始负责处理路由，以提供更流畅的用户体验。React-Router 提供...
react-router:react-router-dom的实现
05-24
在React应用中使用`react-router-dom`，我们需要导入几个关键组件：`BrowserRouter`, `Route`, `Switch` 和 (可选的) `Link`。`BrowserRouter`是React Router的基础，它监听浏览器的URL变化，`Route`定义了各个路由...
React-router4路由监听的实现
10-18
在 `src/app.js` 中，我们定义了App组件，使用Router包裹IndexPage组件作为一级路由组件。 ```javascript export default class App extends Component { render() { return ( <Router> </Router> ); } } `...
React中匹配路由参数的方式
whuhewei的博客
05-02 2097
模糊匹配 默认情况下，路由中的规则是模糊匹配的，如果路由可以部分匹配成功，就会展示这个路由对应的组件。看下面的例子： <Link to="/movie/top250/10">电影</Link> <Route path="/movie" component={Movie}></Route> 虽然Link标签的to属性与Route标签的path不完全相...
React路由匹配的问题
biaov
07-17 2875
最近在写 React 项目时，被 React 路由匹配的问题折磨的够呛，这里来分享一下其中的一些坑，以及我的路由配置组件。 前提 安装路由 npm i react-router-dom -S 用 react-router-dom 不用 react-router 的原因： react-router-dom多出<Link> <BrowserRouter>等组件。 更适合，更好用，更简单（没有这些组件就需要你自己去封装）。 配置 history 模式 如果使用 hash.
Route组件
weixin_42260975的博客
03-20 579
react-router之Route组件 本文内容整理参考借鉴以下文章： https://www.jianshu.com/p/6583b7258e78 https://reacttraining.com/react-router/web/api/BrowserRouter 在此以表感谢！ Route 路由组件(Route)可能是React路由器中最重要的组件，可以帮助您更好地理解和学习使用。它最...
React路由管理 —— React Router 总结
热门推荐
浩时代的博客
10-08 2万+
React项目通常都有很多的URL需要管理，最常使用的解决方案就是React Router了，最近学习了一下，主要是看了一下官方的英文文档，加以总结，以备后查。React Router是做什么的呢，官方的介绍是：A complete routing library for React，keeps your UI in sync with the URL. It has a simple API wi
React第三方组件1(路由管理之Router的使用①简单使用)
oKeYue的博客
01-22 1076
本教程总共6篇,每日更新一篇,请关注我们!你可以进入历史消息查看以往文章,也敬请期待我们的新文章! 1、React第三方组件1(路由管理之Router的使用①简单使用)---2018.01.22 2、React第三方组件1(路由管理之Router的使用②多层级跳转及重定向)---2018.01.23 3、React第三方组件1(路由管理之Rou
react 路由模糊匹配与严格匹配
weixin_44607531的博客
02-22 1099
我们一般使用react路由时，链接要与组件相匹配，如下使用 <NavLink to='/home'>Home</NavLink> <Route path='/home' component={Home}/> 模糊匹配 如下所示，当链接第一级路径能匹配上相应的组件，而链接后面再多几级路径也不会产生影响，依旧能正常匹配（当然链接路径少于组件路径时不能匹配，像to='/a/home/b'这样也无法匹配） <NavLink to='/home/a/b'&gt.
react进阶（二）——react-router基本使用和匹配规则
qq_40566547的博客
06-16 3177
react-router的安装  在项目根目录运行命令 npm install react-router-dom / yarn add react-router-dom 初始化自己的项目  删去初始项目src所有的文件，还原一个干净的src  在src目录下新建index.js（必须有的一个文件，因为他是入口文件）和App文件，代码部分如下：  index.js代码 import React f...
React 动态路由匹配模式
xn_xuke的博客
11-13 1076
在react开发中，有时候会碰到一种需求：某一个页面的内容，会根据调用的后台api版本的不同，显示不同的内容。 如果需要显示的内容，只是字段的多少差别，可以在路由中通过传参的方式进行区分。而如果需要显示的内容，差别较大，甚至出现结构差别，就需要通过编写不同组件的方式进行显示。 不同的组件，在动态路由中，需要用到匹配模式，类似于正则的方式对路由进行过滤。 { ...
【React】SPA - 路由机制 - react-router-dom - 基本路由 - 嵌套路由 - 传递参数 - 路由跳转
YK菌的博客
06-15 1399
前端路由
深入解析react-router@4.0：使用与源码剖析
源码分析部分可能涉及对react-router核心组件的工作原理的理解，包括`matchPath`函数用于检查URL是否与给定路径匹配，以及`createMemoryHistory`和`createBrowserHistory`等历史记录管理器的使用。这些组件和函数...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值