react-router

Route,hashHistory,Route

  IndexRoute即处理页面初始进入时候的组件展示,等路由切换的时候,再根据其他路由规则进行组件的切换展示

Link

  react-router提供的导航组件,可以直接使用进行路由切换,相当于a标签

browserHistory

  使用browserHistory的时候,浏览器中导航栏的url就不会出现_k的hash键值对,实际项目中一般用browserHistory。这样正常点击路由切换没有问题,但是重新刷新url就会报找不到路由,这个时候我们在webpack-dev-server启动的时候需要加上参数--history-api-fallback,也可以在webpack配置中设置historyApiFallback为true

activeStyle,activeClassName

  当前路由被点击处于触发显示状态的时候,我们可以使用activeStyle来给路由设置一些颜色

路由变量

  常规的路由,路由中的规则是给定的,我们可以尝试使用路由变量,在组件中获取这个路由的变量,并做相应的组件展示

  如<Route path=‘/(:message)‘ component={message}/>,在message组件中,可以通过this.props.params.message获取到这个变量的值。

Route中components参数的高级用法

  Route中components中接收的参数不仅仅只是实际的组件,还可以是对象,通过这样的用法,我们可以更灵活的控制组件的展示。

  如:<IndexRoute components={{header:HomeHeader,body:HomeBody}}/>使用的时候,直接用{props.header},{props.body}获取就可以了。

使用query获取url中的参数

  可以将url中访问的参数获取,并且应用到组件中。props.location.query.message 拿到?message=‘value‘的值

  还可以在Link组件中设置pathname和query变量

  如:<Link to={{pathname:"/",query:{message:‘fengmin‘}}}

rediect重定向

  <Redirect from="/contact" to="/contact-us"/>

setRouteLeaveHook

路由钩子函数,处理路由切换时的操作

componentWillMount(){
  this.context.router.setRouteLeaveHook(
       this.props.route,
       this.routerWillLeave
  )
}
routerWillLeave(nextLocation){
    return `页面即将从home跳转到${nextLocation.pathname}`
}    
时间: 2024-12-28 21:20:19

react-router的相关文章

react router 4.0以上的路由应用

thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr>td,.table>tbody>tr>th,.table>tbody>tr>td,.table>tfoot>tr>th,.table>tfoot>tr>td{padding:8px;line-height:1.4285714;ver

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

请表明转载链接:http://www.cnblogs.com/zhangkunweb/p/6853728.html 我是一个喜欢捣腾的人,没事总喜欢学点新东西,可能现在用不到,但是不保证下一刻用不到. 我一直从事的是依赖angular.js 的web开发,但是我怎么能一直用它呢?看看最近火的一塌糊涂的reactjs ,我的天啊,不学会它,怎么能睡好觉. 今天我分享一个依赖最新版本的webpack + react + router + redux + scss + nodejs + mysql +

[React Router v4] Use the React Router v4 Link Component for Navigation Between Routes

If you’ve created several Routes within your application, you will also want to be able to navigate between them. React Router supplies a Link component that you will use to make this happen. Import Link: import { BrowserRouter as Router, Route, Link

[React Router V4] Create Basic Routes with the React Router v4 BrowserRouter

React Router 4 has several routers built in for different purposes. The primary one you will use for building web applications is the BrowserRouter. In this lesson you will import the BrowserRouter and create some basic Route components. After create

[Redux] Filtering Redux State with React Router Params

We will learn how adding React Router shifts the balance of responsibilities, and how the components can use both at the same time. Now when we click the filter, the url changes, but the todos list doesn't change. So continue with that. Router only r

[Redux] Navigating with React Router &lt;Link&gt;

We will learn how to change the address bar using a component from React Router. In Root.js: We need to add a param to change the Route: import React from 'react'; import {Provider} from 'react-redux'; import {Router, Route, browserHistory } from 're

[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. Install: npm install --save react-router import React from 'react'; import {Provider} from 'react-redux'; import {Router, Route} from 'react-router'; impo

[转] React Router 使用教程

你会发现,它不是一个库,也不是一个框架,而是一个庞大的体系.想要发挥它的威力,整个技术栈都要配合它改造.你要学习一整套解决方案,从后端到前端,都是全新的做法. 举例来说,React 不使用 HTML,而使用 JSX .它打算抛弃 DOM,要求开发者不要使用任何 DOM 方法.它甚至还抛弃了 SQL ,自己发明了一套查询语言 GraphQL .当然,这些你都可以不用,React 照样运行,但是就发挥不出它的最大威力. 这样说吧,你只要用了 React,就会发现合理的选择就是,采用它的整个技术栈.

React漫漫学习路之 React Router

React Router 是一个基于 React 之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与 URL 间的同步. 目前react-router最新版本已经到4.0+,因为新的版本是一次非常大的改动,所以这里直接讨论4.0以上版本. 引用 react-router // React Router 核心 react-router-dom // 用于 DOM 绑定的 React Router react-router-native // 用于 React Native

Redux+React Router+Node.js全栈开发

详情请交流  QQ  709639943 01.Java深入微服务原理改造房产销售平台 02.跨平台混编框架 MUI 仿豆瓣电影 APP 03.Node.js入门到企业Web开发中的应用 04.Redux+React Router+Node.js全栈开发 05.Java秒杀系统方案优化 高性能高并发实战 06.企业级刚需Nginx入门,全面掌握Nginx配置+快速搭建高可用架构 07.快速上手Linux 玩转典型应用 08.全面系统讲解CSS 工作应用+面试一步搞定 09.Java Spring