1、安装使用

$ npm install -S react-router
import { Router, Route, hashHistory } from 'react-router';

render((
<Router history={hashHistory}>
<Route path="/" component={App}/>
</Router>
), document.getElementById('app'));

1.1、版本问题

react-router 有多个版本,2.x/3.x  - 4.x版本有比较大的改动,并且互相不兼容,2.x/3.x 和 4.x 版本的语法有非常大的不同。并且 react-router 和 react 的某些版本也会有冲突

目前使用 react-router 的 3.x 版本下面的版本可以运行成功。

"dependencies": {
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-router": "^3.0.2",
"react-scripts": "3.1.1"
}

2、Router 组件

2.1、JSX 的 Route 组件实现路由

路由器Router就是React的一个组件。Router组件本身只是一个容器,真正的路由要通过Route组件定义。

//入口文件 index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory } from 'react-router'; ReactDOM.render((
<Router history={hashHistory}>
<Route path="/" component={App}>
<Route path="/repos" component={Repos}/>
</Route>
</Router>
), document.getElementById('app'));

2.1、route 数组对象实现路由

子路由也可以不写在Router组件里面,单独传入Router组件的routes属性。

let routes = <Route path="/" component={App}>
<Route path="/repos" component={Repos}/>
</Route>; <Router routes={routes} history={browserHistory}/>

或者是更方便的写法(推荐写法):

const routes = [{
path: '/',
component: App,
indexRoute: { component: DefaultComponent },
childRoutes: [
{ path: 'about', component: About },
{ path: 'inbox', component: Inbox },
]
}] React.render(<Router routes={routes} />, document.body)

3、路径匹配的组件

react-router 是按 URL 来匹配组件的。

React.render((
<Router>
<Route path="/" component={App}>
<Route path="about" component={About} />
<Route path="inbox" component={Inbox}>
<Route path="messages/:id" component={Message} />
</Route>
</Route>
</Router>
), document.body)

如果 URL 匹配到某个组件,并且 URL 上并没有该组件的上层组件(即包含着它的上层 Route),此时仍然会匹配到该组件的上层 Route。

比如下面:用绝对路径表示 Message 组件,当 URL 是 /message/aaa 时,仍会匹配到 APP 和 Inbox 组件,然后再是 Message 组件。

React.render((
<Router>
<Route path="/" component={App}>
<IndexRoute component={Dashboard} />
<Route path="about" component={About} />
<Route path="inbox" component={Inbox}>
{/* 使用 /messages/:id 替换 messages/:id */}
<Route path="/messages/:id" component={Message} />
</Route>
</Route>
</Router>
), document.body)

想要在某组件内渲染它的下层即子路由,在组件内使用 {this.props.children} 语法。

React-router的基本使用的更多相关文章

  1. [Redux] Filtering Redux State with React Router Params

    We will learn how adding React Router shifts the balance of responsibilities, and how the components ...

  2. [转] React Router 使用教程

    PS:react-route就是一个决定生成什么父子关系的组件,一般和layout结合起来,保证layout不行,内部的子html进行跳转 你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系. ...

  3. [Redux] Navigating with React Router <Link>

    We will learn how to change the address bar using a component from React Router. In Root.js: We need ...

  4. [Redux] Adding React Router to the Project

    We will learn how to add React Router to a Redux project and make it render our root component. Inst ...

  5. React Router基础使用

    React是个技术栈,单单使用React很难构建复杂的Web应用程序,很多情况下我们需要引入其他相关的技术 React Router是React的路由库,保持相关页面部件与URL间的同步 下面就来简单 ...

  6. 最新的chart 聊天功能( webpack2 + react + router + redux + scss + nodejs + express + mysql + es6/7)

    请表明转载链接: 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊 ...

  7. react router 4.0以上的路由应用

    thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...

  8. React Router 使用教程

    一.基本用法 React Router 安装命令如下. $ npm install -S react-router 使用时,路由器Router就是React的一个组件. import { Router ...

  9. 关于react router 4 的小实践

    详细代码栗子:https://github.com/wayaha/react-dom-CY clone然后 npm install npm start 分割线 1.这个项目使用create-react ...

  10. React Router 4.x 开发,这些雷区我们都帮你踩过了

    前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...

随机推荐

  1. ES6标准入门 第五章:函数的扩展

    1.函数参数的默认值 (1)基本用法 ES5 中, 不能直接为函数的参数指定默认值.只能采用变通的方法. function log(x, y) { y = y || 'World'; console. ...

  2. 将Unix时间戳转换为Date、Json属性动态生成反序列化、序列化指定属性

    实体类 public class Test { [JsonIgnore] public string GetDate { get { return GetTime.ToString("yyy ...

  3. 笨办法学python 13题:pycharm 运行

    笨办法学python 13题 代码: # -*- coding: utf-8 -*- from sys import argv # argv--argument variable 参数变量 scrip ...

  4. 使用screen管理后台程序

    我们常需要SSH 或者telent 远程登录到Linux 服务器,经常运行一些需要很长时间才能完成的任务,在此期间不能关掉窗口或者断开连接,否则这个任务就会被杀掉,一切半途而废了.这时,我们可以用sc ...

  5. nrm安装与配置

    nrm安装与配置:https://blog.csdn.net/anway12138/article/details/79455224

  6. c++多线程并发学习笔记(1)

    共享数据带来的问题:条件竞争 避免恶性条件竞争的方法: 1. 对数据结构采用某种保护机制,确保只有进行修改的线程才能看到修改时的中间状态.从其他访问线程的角度来看,修改不是已经完成了,就是还没开始. ...

  7. PY 个板子计划【雾

    各类板子计划 A+B √ 放个鬼的链接[雾 欧拉筛 √ https://www.cnblogs.com/Judge/p/11690114.html 树状数组 √ 惨痛的教训,以后咱打数据结构的时候绝对 ...

  8. 01分数规划问题(二分法与Dinkelbach算法)

    链接 前置技能 二分思想 最短路算法 一些数学脑细胞? 问题模型1基本01分数规划问题给定n个二元组(valuei,costi),valuei是选择此二元组获得的价值(非负),costi是选择此二元组 ...

  9. css重置的各种版本总结

    个人手机端常用到的: @charset "utf-8"; body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ...

  10. vue实现动画和css3动画属性

    一.vue动画实现原理: 动画的实现,必须通过元素的显示隐藏或销毁创建.v-show  v-if vue中如果需要使用动画的时候,需要使用一个内置组件transition组件 该组件有一个name属性 ...