关于react router 4 的小实践
详细代码栗子:https://github.com/wayaha/react-dom-CY(如果对您有帮助,请你帮我点颗star)
clone然后
npm install
npm start
分割线
1、这个项目使用create-react-app搭建;
首先需要安装好create-react-app
npm install -g create-react-app
安装完毕之后就是搭建项目;
create-react-app your-project-name
cd your-project-name
npm start
安装完成之后,会自动打开localhost:3000;打开create-react-app自带的一个简单dom。
** 另外,create-react-app默认配置样式使用的.css文件,习惯使用.scss的大佬可以在config文件下的 webpack.config.dev.js 和 webpack.config.prod.js 中rules数组中添加下面配置即可;
{
test:/\.scss$/,
loaders:['style-loader', 'css-loader', 'sass-loader']
}
2、关于相关安装包的下载
React Router被拆分成三个包:react-router
,react-router-dom
和react-router-native
。react-router
提供核心的路由组件与函数。其余两个则提供运行环境(即浏览器与react-native)所需的特定组件。
进行网站(将会运行在浏览器环境中)构建,我们应当安装react-router-dom
。react-router-dom
暴露出react-router
中暴露的对象与方法,因此你只需要安装并引用react-router-dom
即可。
npm install --save react-router-dom
3、开始项目代码
代码结构如下:
(1)、路由类型的选择
在你开始项目前,你需要决定你使用的路由的类型。对于网页项目,存在<BrowserRouter>
与<HashRouter>
两种组件。当存在服务区来管理动态请求时,需要使用<BrowserRouter>组件,而<HashRouter>被用于静态网站。
通常,我们更倾向选择<BrowserRouter>,但如果你的网站仅用来呈现静态文件,那么<HashRouter>将会是一个好选择。
从效果上来看,<BrowserRouter>
比<HashRouter>在url中少了一个#,需要注意的是,没有#的路由切换前后对服务端来说是不同的url,。在我们的Dome中可以试一下,代码在index.js如下:
import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import {
// BrowserRouter,
HashRouter
} from 'react-router-dom';
import { Provider } from 'react-redux';
import reducer from './redux';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker'; const store = createStore(reducer); ReactDOM.render(
<Provider store={store}>
{/* <BrowserRouter> */}
<HashRouter>
<App />
</HashRouter>
{/* </BrowserRouter> */}
</Provider>,
document.getElementById('root')
);
registerServiceWorker();
(2)、一级路由就是Route文件下的index.js文件所示;
代码如下:
import React, { Component } from 'react';
import { Switch, Route, Redirect, NavLink } from 'react-router-dom';
import Home from '../components/Home';
import Company from '../components/Company';
import Park from '../components/Park';
import './index.scss'; class Main extends Component {
// constructor (props) {
// super(props);
// };
componentDidMount () {
console.log('this is Main...');
}; render () {
return (
<main className={'mainSec'}>
<nav>
<NavLink
className="resetNavLink"
activeClassName='navActive'
to='/home'>
{'Home'}
</NavLink>
<NavLink
className="resetNavLink"
activeClassName='navActive'
to='/company'>
{'Company'}
</NavLink>
<NavLink
className="resetNavLink"
activeClassName='navActive'
to='/park'>
{'park'}
</NavLink>
</nav>
<Switch>
<Route exact path='/home' component={Home} />
<Route path='/company' component={Company} />
<Route exact path='/park' component={Park} />
<Redirect to='/home' />
</Switch>
</main>
)
}
}; export default Main;
a、锚点的选择和使用
现在,我们应用需要在各个页面间切换。如果使用锚点元素实现,在每次点击时页面将被重新加载。React Router提供了<Link>和<NavLink>组件用来避免这种状况的发生。当你点击<Link>时,URL会更新,组件会被重新渲染,但是页面不会重新加载。实际上锚点元素就是一个a标签,to属性就相当于href属性;
<Link>使用'to'参数来描述需要定位的页面。它的值也可以是location对象(包含pathname,search,hash与state属性)。如果其值为字符串将会被转换为location对象。
<NavLink>可以增加 activeClassName 或者 activeStyle 属性,设置当前路由被选中的样式;
-- exact: 当为true时,仅当位置匹配完全时才会应用活动类/样式。
b、Route
path: string; 一个有效的URL路径。
exact: bool 当为true时,仅当路径与location.pathname完全匹配时才匹配。如果该路由有子路由,不能设置为true。
strict: bool 当为true时,具有尾部斜杠的路径将仅与具有尾部斜杠的location.pathname匹配。当在location.pathname中有其他URL段时,这不起作用。strict可以用来强制执行location.pathname没有尾部斜杠,但为了做到这一点,strict和exact必须是true。
另外,还有component、render 和 children属性,这三个属性优先级依次降低,不可以在一个Route组件上使用这三个属性中的多个。一般选择用component属性。
c、Redirect 重定向
to: string/Object 要重定向到的网址。
push: bool 当为true时,重定向会将新条目推入历史记录,而不是替换当前条目。
from: string 要重定向的路径名。这只能用于在<Switch>内部呈现<Redirect>时匹配位置;
d、Switch 它的独特之处是独它仅仅渲染一个路由;
(3)、路由的嵌套
路由嵌套在Companey组件中;代码如下;
import React, { Component } from 'react';
import { Switch, Route, NavLink, Redirect } from 'react-router-dom';
import FontEnd from './FontEnd';
import BackEnd from './BackEnd';
import Test from './Test';
import Manage from './Manage'; class Company extends Component {
componentDidMount () {
console.log('this is Company...');
}; render () {
const { match } = this.props;
// console.log(match);
return (
<div>
<p>{'this is Company.....'}</p>
<nav>
<NavLink
className="resetNavLink"
activeClassName='navActive'
to='/company/fontEnd'>
{'FontEnd'}
</NavLink>
<NavLink
className="resetNavLink"
activeClassName='navActive'
to='/company/backEnd'>
{'BackEnd'}
</NavLink>
<NavLink
className="resetNavLink"
activeClassName='navActive'
to='/company/test'>
{'Test'}
</NavLink>
<NavLink
className="resetNavLink"
activeClassName='navActive'
to='/company/manager'>
{'Manager'}
</NavLink>
</nav>
<Switch>
<Route exact path={`${match.path}/:department`} render={(localtions) => {
const { match: { params: {department} }} = localtions;
console.log(department);
const temp = {fontEnd: <FontEnd />, backEnd: <BackEnd />, test: <Test />, manager: <Manage />}
return temp[department];
}}
/>
<Redirect to='company/fontEnd/' />
</Switch>
</div>
);
};
}; export default Company;
这个没有什么特别的,需要注意的就是,子路由Route的path和锚点的 to 都是需要一个完整的路由路径; 子路由路径中 ”:“ 后的属性是可传到子组件的参数,在子组件this.props.match.params中是可以拿到的。
关于react router 4 的小实践的更多相关文章
- React Router 4.x 开发,这些雷区我们都帮你踩过了
前言 在前端框架层出不穷的今天,React 以其虚拟 DOM .组件化开发思想等特性迅速占据了主流位置,成为前端开发工程师热衷的 Javascript 库.作为 React 体系中的重要组成部分:Re ...
- react、react-router、redux 也许是最佳小实践1
小前言 这是一个小小的有关react的小例子,希望通过一个小例子,可以让新手更好的了解到react.react-router4.0.redux的集中使用方法. 这是基于create-react-app ...
- React 实践记录 03 React router
Introduction 本文主要参考了react router 的官方文档. React Router是一套完整的配合React的路由解决方案,可能你已经知道前端路由,或者知道后端有路由的概念,如下 ...
- React router动态加载组件-适配器模式的应用
前言 本文讲述怎么实现动态加载组件,并借此阐述适配器模式. 一.普通路由例子 import Center from 'page/center'; import Data from 'page/data ...
- React Router教程
React Router教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-router-dom 应用于浏览 ...
- React Router学习
React Router教程 本教程引用马伦老师的的教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-ro ...
- [Web 前端] 你不知道的 React Router 4
cp from https://segmentfault.com/a/1190000010718620 几个月前,React Router 4 发布,我能清晰地感觉到来自 Twitter 大家对新版本 ...
- React Router V4.0学习笔记
最近在学习React Router,但是网站的教程多半还是3.X版本之前的,所以我只能在GitHub上找到React Router的官方文档在读.后来总结了一下,包括学习经验以及V3.X与V4.X的差 ...
- React Router 4.0 体验
React Router 4.0 (以下简称 RR4) 已经正式发布,它遵循React的设计理念,即万物皆组件.所以 RR4 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编 ...
随机推荐
- RabbitMQ消息队列(五):Routing 消息路由
上篇文章中,我们构建了一个简单的日志系统.接下来,我们将丰富它:能够使用不同的severity来监听不同等级的log.比如我们希望只有error的log才保存到磁盘上. 1. Bindings ...
- The Singularity is Near---预测人工智能,科技走向的神书---奇点临近
比尔盖茨评价本文作者: 雷·库兹韦尔是我所知道的预测人工智能未来最权威的人.他的这本耐人寻味的书预测未来信息技术得到空前发展,将促使人类超越自身的生物极限--以我们无法想象的方式超越我们的生命. 中文 ...
- JAVA之旅(九)——Object类,equals,toString,getClass,内部类访问规则,静态内部类,内部类原则,匿名内部类
JAVA之旅(九)--Object类,equals,toString,getClass,内部类访问规则,静态内部类,内部类原则,匿名内部类 天天被一些琐事骚扰,学习还得继续 一.Object类 Obj ...
- C++ Primer 有感(命名的强制类型转换)
C++四种强制类型转换的方法以及其应用场合,之前有看过这个知识点,但是,面试的时候怎么想也就没有写的很全面,于是,这里整理一下: C++中的四种强制类型转换除了具有C语言强制类型转换的功能外,还可提供 ...
- 开源项目管理系统:ProjectForge
ProjectForge是一个Java编写的开源的基于Web的项目管理解决方案.包括:工时表(Timesheet).费用管理.项目甘特图,控制和管理工程分解结构.集成JiRA做为问题管理系统. 使用的 ...
- [WinForm]动态显示本地目录图片与悬浮窗
加载显示: if (File.Exists(@"D:\产品图片\" + item + ".jpg")) { //需要判断是否存在图片 Image img = I ...
- OC语言(一)
一.概述 1.基本上所有关键词@开头 2.字符串以@开头,如@"Hello" 3.基本数据类型 char int float double BOOL(YES\NO) 4.空为nil ...
- EM实现
以下是实验设计 设计一个一维的数据,14个数据,7个成一组,一个高斯分布,整体数据隐含了2个高斯分布. 系统最初给出第一个数属于z0的概率0.9,最后一个数属于在z1的概率0.9,其余数据不可判定. ...
- LeetCode之“树”:Binary Tree Level Order Traversal && Binary Tree Level Order Traversal II
Binary Tree Level Order Traversal 题目链接 题目要求: Given a binary tree, return the level order traversal o ...
- OpenCV 透视变换实例
参考文献: http://www.cnblogs.com/self-control/archive/2013/01/18/2867022.html http://opencv-code.com/tut ...