react-router学习笔记

最新推荐文章于 2024-03-01 10:55:48 发布
最新推荐文章于 2024-03-01 10:55:48 发布
阅读量3k 收藏
点赞数
分类专栏： JavaScript React
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liningaa/article/details/52790683
版权

参考：
React Router 中文文档
阮一峰 React Router 使用教程

1.Router,hashHistory,Route

首先下载react-router

$ npm install react-router --save

需要注意的是，react-router更新很快，API也在持续升级，也许你看到市面很多教程，但可能那还是1.x甚至是0.x版本的，本文采用2.0.0版本。

我们首先在App.jsx写一个简单示例，让你快速的对react-router有印象。

import React, { Component } from 'react';
import { Router, Route, hashHistory } from 'react-router';

const Home = () => <div><h1>Home</h1></div>;
const About = () => <div><h1>About</h1></div>;
const Contact = () => <div><h1>Contact</h1></div>;

class App extends Component {
  render() {
    return (
      <Router history={hashHistory}>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Router>
    );
  }
}

export default App;

Link是react-router提供的导航组件，可以直接使用进行路由切换

import React, { Component } from 'react';
import { Router, Route, hashHistory, Link } from 'react-router';

const Home = () => <div><h1>Home</h1><Links /></div>;
const About = () => <div><h1>About</h1><Links /></div>;
const Contact = () => <div><h1>Contact</h1><Links /></div>;

const Links = () =>
  <nav>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
    <Link to="/contact">Contact</Link>
  </nav>

class App extends Component {
  render() {
    return (
      <Router history={hashHistory}>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Router>
    );
  }
}

export default App;

3.browserHistory

browserHistory和hashHistory不一样，使用browserHistory的时候，浏览器中导航栏的URL就不会出现_k的hash键值对。实际项目中也一般用browserHistory.

import React, { Component } from 'react';
import { Router, Route, browserHistory, Link } from 'react-router';

const Home = () => <div><h1>Home</h1><Links /></div>;
const About = () => <div><h1>About</h1><Links /></div>;
const Contact = () => <div><h1>Contact</h1><Links /></div>;

const Links = () =>
  <nav>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
    <Link to="/contact">Contact</Link>
  </nav>

class App extends Component {
  render() {
    return (
      <Router history={browserHistory}>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Router>
    );
  }
}

export default App;

这样正常点击路由切换没有问题，但是重新刷新URL就会报找不到路由，这个时候我们在webpack-dev-server启动的时候需要加上参数–history-api-fallback。

4.activeStyle,activeClassName

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

import React, { Component } from 'react';
import { Router, Route, browserHistory, Link } from 'react-router';

const Home = () => <div><h1>Home</h1><Links /></div>;
const About = () => <div><h1>About</h1><Links /></div>;
const Contact = () => <div><h1>Contact</h1><Links /></div>;

const Links = () =>
  <nav>
    <Link activeStyle={{color: 'red'}} to="/">Home</Link>
    <Link activeStyle={{color: 'red'}} to="/about">About</Link>
    <Link activeStyle={{color: 'red'}} to="/contact">Contact</Link>
  </nav>

class App extends Component {
  render() {
    return (
      <Router history={browserHistory}>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Router>
    );
  }
}

export default App;

同理，我们还可以使用activeClassName来将路由激活状态的样式抽取出来。

我们在App.css写一个样式，

.active {
  color: red;
}

然后修改App.jsx

import React, { Component } from 'react';
import { Router, Route, browserHistory, Link } from 'react-router';

import './App.css';

const Home = () => <div><h1>Home</h1><Links /></div>;
const About = () => <div><h1>About</h1><Links /></div>;
const Contact = () => <div><h1>Contact</h1><Links /></div>;

const Links = () =>
  <nav>
    <Link activeClassName="active" to="/">Home</Link>
    <Link activeClassName="active" to="/about">About</Link>
    <Link activeClassName="active" to="/contact">Contact</Link>
  </nav>

class App extends Component {
  render() {
    return (
      <Router history={browserHistory}>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Router>
    );
  }
}

export default App;

5.路由嵌套

刚才讲的是简单路由的切换，但实际应用中，路由是分多个层级的。幸运的是，我们可以使用react-router的路由嵌套来清晰的管理路由和组件之间的切换展示。

import React, { Component } from 'react';
import { Router, Route, browserHistory, Link } from 'react-router';

import './App.css';

const Home = (props) =>
  <div>
    <h1>Home</h1>
    <Links />
    {props.children}
  </div>

const About = (props) =>
  <div>
    <h1>About</h1>
    {props.children}
  </div>

const Contact = () =>
  <div>
    <h1>Contact</h1>
  </div>

const Links = () =>
  <nav>
    <Link activeClassName="active" to="/">Home</Link>
    <Link activeClassName="active" to="/about">About</Link>
    <Link activeClassName="active" to="/about/contact">Contact</Link>
  </nav>

class App extends Component {
  render() {
    return (
      <Router history={browserHistory}>
        <Route path="/" component={Home}>
          <Route path="about" component={About}>
            <Route path="contact" component={Contact} />
          </Route>
        </Route>
      </Router>
    );
  }
}

export default App;

6.IndexRoute

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

import React, { Component } from 'react';
import { Router, Route, browserHistory, Link, IndexRoute } from 'react-router';

import './App.css';

const Home = (props) =>
  <div>
    <h1>Home</h1>
    <Links />
    {props.children}
  </div>

const About = () =>
  <div>
    <h1>About</h1>
  </div>

const Contact = () =>
  <div>
    <h1>Contact</h1>
  </div>

const Links = () =>
  <nav>
    <Link activeClassName="active" to="/">Home</Link>
    <Link activeClassName="active" to="/contact">Contact</Link>
  </nav>

class App extends Component {
  render() {
    return (
      <Router history={browserHistory}>
        <Route path="/" component={Home}>
          <IndexRoute component={About} />
          <Route path="contact" component={Contact} />
        </Route>
      </Router>
    );
  }
}

export default App;

7.路由变量

刚才展示的是常规的路由，路由中的规则是给定的，现在我们尝试使用路由变量，在组件中获取这个路由的变量，并做相应的组件展示。

import React, { Component } from 'react';
import { Router, Route, hashHistory, Link, IndexRoute } from 'react-router';

import './App.css';

const Message = (props) =>
  <div>
    <h1>{props.params.message || 'Hello'}</h1>
    <Links />
  </div>

const Links = () =>
  <nav>
    <Link to="/">Hello</Link>
    <Link to="/li">li</Link>
    <Link to="/ning">ning</Link>
  </nav>

class App extends Component {
  render() {
    return (
      <Router history={hashHistory}>
        <Route path="/(:message)" component={Message} />
      </Router>
    );
  }
}

export default App;

8.Route中components参数的高级用法

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

import React, { Component } from 'react';
import { Router, Route, hashHistory, Link, IndexRoute } from 'react-router';

import './App.css';

const HomeHeader = () => <h1>HomeHeader</h1>
const HomeBody = () => <h1>HomeBody</h1>
const AboutHeader = () => <h1>AboutHeader</h1>
const AboutBody = () => <h1>AboutBody</h1>

const Container = (props) =>
  <div>
    {props.header}
    {props.body}
    <Links />
  </div>

const Links = () =>
  <nav>
    <Link to="/">Hello</Link>
    <Link to="/about">About</Link>
  </nav>

class App extends Component {
  render() {
    return (
      <Router history={hashHistory}>
        <Route path="/" component={Container}>
          <IndexRoute components={{ header:HomeHeader, body:HomeBody }} />
          <Route path="about" components={{ header:AboutHeader, body:AboutBody }} />
        </Route>
      </Router>
    );
  }
}

export default App;

9.使用query获取URL中的参数

我们可以将URL中访问的参数获取，并且应用到组件中。

import React, { Component } from 'react';
import { Router, Route, hashHistory, Link, IndexRoute } from 'react-router';

import './App.css';

const Page = (props) =>
  <div>
    <h1>{props.location.query.message || 'Hello'}</h1>
  </div>

class App extends Component {
  render() {
    return (
      <Router history={hashHistory}>
        <Route path="/" component={Page} />
      </Router>
    );
  }
}

export default App;

然后在url中输入http://localhost:8080/#/?message=lining，页面中就会显示lining。

另外，我们还可以在Link组件中设置pathname和query变量

import React, { Component } from 'react';
import { Router, Route, hashHistory, Link, IndexRoute } from 'react-router';

const Page = (props) =>
  <div>
    <h1>{props.location.query.message || 'Hello'}<Links /></h1>
  </div>

const Links = () =>
  <nav>
    <Link to={{ pathname: "/", query: {message: "lining"} }}>lining</Link>
  </nav>

class App extends Component {
  render() {
    return (
      <Router history={hashHistory}>
        <Route path="/" component={Page} />
      </Router>
    );
  }
}

export default App;

10.Redirect重定向

import React, { Component } from 'react';
import { Router, Route, hashHistory, Link, Redirect } from 'react-router';

const Home = () => <div><h1>Home</h1><Links /></div>;
const About = () => <div><h1>About</h1><Links /></div>;
const Contact = () => <div><h1>Contact</h1><Links /></div>;

const Links = () =>
  <nav>
    <Link to="/">Home</Link>
    <Link to="/about">About</Link>
    <Link to="/contact">Contact</Link>
    <Link to="/contact-us">Contact US</Link>
  </nav>

class App extends Component {
  render() {
    return (
      <Router history={hashHistory}>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact-us" component={Contact} />
        <Redirect from="/contact" to="/contact-us" />
      </Router>
    );
  }
}

export default App;

11.setRouteLeaveHook路由钩子函数：处理路由切换时的操作

import React, { Component, PropTypes } from 'react';
import { Router, Route, hashHistory, Link } from 'react-router';

class Home extends Component {
  componentWillMount(){
    this.context.router.setRouteLeaveHook(
      this.props.route,
      this.routerWillLeave
    )
  }
  routerWillLeave( nextLocation ){
    return `页面即将从Home切换到${nextLocation.pathname}`
  }
  render(){
    return <div>
      <h1>Home</h1>
      <Links />
    </div>
  }
}

Home.contextTypes = {
  router: PropTypes.object.isRequired
};

const Contact = () => <div><h1>Contact</h1><Links /></div>;

const Links = () =>
  <nav>
    <Link to="/">Home</Link>
    <Link to="/contact">Contact</Link>
  </nav>

class App extends Component {
  render() {
    return (
      <Router history={hashHistory}>
        <Route path="/" component={Home} />
        <Route path="/contact" component={Contact} />
      </Router>
    );
  }
}

export default App;
liningaa
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-hash:React自定义钩子以从URL获取哈希
05-10
React哈希 React自定义钩子以从URL获取哈希值。 目录 安装 npm： npm install react-hash 纱： yarn add react-hash 用法 import React from 'react' ; import { useHash } from 'react-hash' ; const App = ( ) => { const [ hash , setHash ] = useHash ( ) ; return ( < div className = 'App'> < h1> { hash } < / h1 > < input type = 'text' value = { hash } onChange = { ( e ) => setHash ( e .
【封装 Hooks】useHash（获取和更新 URL hash 值）
qq_45677671的博客
04-25 520
文章目录基本用法 基本用法 封装的文件：useHash.ts import { useState, useCallback, useEffect } from 'react'; /** * 获取和更新 URL hash 值 */ export const useHash = () => { const [hash, setHash] = useState(() => window.location.hash); const onHashChange = useCallback
ReactRouter基础
最新发布
u012106430的博客
03-01 824
react路由的使用
React 路由传值的三种方法
YWW_ABC的博客
12-18 2329
React传值
react-router的使用（一）——URL的hash、HTML5的history、Router的基本使用
zep
02-06 1597
一、阶段一：后端路由阶段 早期的网站开发整个HTML页面是由服务器来渲染的. 服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示. 但是, 一个网站, 这么多页面服务器如何处理呢? 一个页面有自己对应的网址, 也就是URL. URL会发送到服务器, 服务器会通过正则对该URL进行匹配, 并且最后交给一个Controller进行处理. Controller进行各种处理, 最终生成HTML或者数据, 返回给前端. 这就完成了一个IO操作. 上面的这种操作, 就是后端路由. 当我们页面中需要请求
React中使用CryptoJS计算文件哈希值
小问号我们是朋友的博客
11-19 1237
读取上传的文件，使用crypto-js进行SHA1、MD5、SHA256等算法的哈希计算。 1.创建通用工具类 handleFileUtils.js： import CryptoJS from "crypto-js"; /** * 进行文件操作的工具类 */ export default { /* 计算文件哈希 */ getFileHash(value){ let reader = new FileReader(); reader...
react之hash值变化
newway007的博客
11-15 1909
import React from "react"; import PropTypes from 'prop-types' class Router extends React.Component{ constructor(props) { super(props); this.state = { hash: window.location.hash } } st...
javaScript react 字符串转hash
qq_32873193的博客
07-09 733
/* *@param str输入值 *@param boolean[asstring=false]设置为true以返回哈希值为8位十六进制字符串而不是整数 *@param integer[seed]可选地传递前一块的哈希 *@返回整数字符串 */ hashFnv32a(str, asString, seed) { /*jshint bitwise:false */ var i, l...
react hook
你还有我
07-29 598
react允许我们自己定义相关的hook，但是需要已use开头。
vue Hash路径 获取 参数值
Lv骚年
11-20 3985
问题： vue项目使用hash模式形成的页面路径包含‘#’，无法使用传统方式获取参数值 解决： getQueryVariable (variable) { const after = window.location.hash.split('?', 2)[1] if (after) { const reg = new RegExp('(^|&)' + variable + '=([^&]*)(&|$)') const r = after.match(reg) if
React-RouterV6版本的使用
idiot_MAN的博客
11-11 1066
核心模块‘ react路由的大部分的核心功能，包括路由匹配算法和大部分的核心组件和钩子react-router-dom React组件中用于路由的软件包，包括react-router的所有内容，还添加了一些特定的Dom的apireact-router-native 开发reactNavite应用，包括react-router的所有内容，添加了一些react-native的api。
react使用hashHistory实现类似get方法带参数跳转
01-08
主页router 前一页引入hashHistory import { HashRouter } from 'react-router-dom'; 传参： btnClick() { hashHistory.push({ pathname: '/apartmentReserve/'+yourApartmentId, query: { name:yourApartmentname, price:yourApartmentprice }, }) } 或者通过to 传参： 点击跳转
Tmacmall-admin:从零开始打造一个企业级电商后台管理系统--采用React16 + React-Router4结合yarn、webpack、ES6和Sass、Bootstrap等技术，体验前开发端新技术
05-15
对于前端新人，从前到后撸一把还是很有必要的，此项目旨在交流学习，后续会整理项目中笔记及相关知识放在博客上，欢迎交流学习~ 上线demo: 项目运行 下载项目 [email protected]:happymmallmac/admin-fe.git 运行 在项目...
react-tutorial：：tiger2：一些React教程-《 React学习笔记》
02-05
认识React React是facebook开源的一套框架，可总结为以下几个特点： 基于JSX语法糖实现 JUST THE UI：在多层架构的设计模式中，React并不算MVC的架构，它可理解为MVC的V层。 虚拟DOM：虚拟DOM，是轻量的js对象，只...
React:一个入门 React 的学习笔记
05-14
这个仓库用于记录我的react使用笔记，以及和大家分享。 react环境搭建 如果不想这么麻烦可以使用。 前言 react不像jquery一样能通过src直接使用它需要一系列的辅助工具的支持，我们在学习react之前需要初步了解 ...
mmall-m：从零开始建立一个企业级电商平台，包括用户端和后台，前者可了解电商网站从设计到上线整个流程；并采用React16 + React-Router4结合纱线，webpack，ES6和Sass ，Bootstrap等技术，体验前开发端新技术！
02-04
并采用React16 + React-Router4结合纱线，webpack，ES6和Sass，Bootstrap等技术，体验前开发端新技术。对于前端新人，从前到后撸一把还是很有必要的，此项目预测交流学习，后续会整理项目中笔记及相关知识放在博客上...
Full-stack-Blog:字体由react +路由器+ redux和服务器由koa2
04-28
前端部分以create-react-app的脚手架搭起react+react-router v4+redux的全家桶 后端采用koa2+mongodb 实践笔记 开发环境 开发环境(node要求 7.6以上) Nodejs:7.6.0 koa:2.0 MongoDB:3.2.10 目录结构 如何运行 后端...
axios发送post请求，提交图片类型表单数据
热门推荐
crli的博客
04-24 1万+
DOME<input type="file" @change="upload" ref="upload">接口const userUploadAtt = (File,config) => axios.post("接口",File,config)处理数据let input = this.$refs.upload 创建一个空的FormData对象 let data = new FormData
jquery animate step 实现 transform css3方法
crli的博客
08-07 1万+
利用jquery animation step 实现 translate(), rotate(), scale(), skew(),等开发方法 jquery animation step 实现 transform css3方法 animate()方法有个step参数规定动画执行的每一步都要执行step这个回调函数。我们可以用使用一个不影响元素效果显著的css值来触发animate()开发方法
react-router-cache-router
09-06
react-router-cache-router是一个基于React Router的扩展库，用于缓存路由组件。在使用React Router时，每次切换路由都会重新渲染组件，这在某些场景下会导致性能问题。而react-router-cache-router提供了一种缓存路由组件的方式，可以避免不必要的重复渲染。 使用react-router-cache-router可以提高应用的性能：当切换到缓存的路由时，不再重新渲染路由组件，而是直接显示上一次缓存的组件。这样可以大大减少组件的重新渲染，提高页面切换的响应速度。 react-router-cache-router的使用方式与React Router类似，只需用`CacheSwitch`替换原来的`Switch`组件，然后在需要缓存的`Route`组件上添加`cache`属性即可。例如： ```jsx import { CacheRouter, CacheRoute } from 'react-router-cache-router'; function MyApp() { return ( <CacheRouter> <CacheSwitch> <CacheRoute path="/" exact component={Home} cache /> <CacheRoute path="/about" component={About} cache /> <CacheRoute path="/contact" component={Contact} /> // 这个路由组件不缓存 </CacheSwitch> </CacheRouter> ); } ``` 需要注意的是，react-router-cache-router仅支持基于React Router v5的版本。在使用时，我们可以根据实际项目的需求来决定是否使用缓存路由组件。如果页面切换频繁且性能要求高，使用react-router-cache-router可以有效地提升应用的性能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值