关于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 只是一堆 提供了导航功能的组件(还有若干对象和方法),具有声明式(声明式编 ...
随机推荐
- JAVA 继承基本类、抽象类、接口
Java是一个面向对象的语言,java面向对象一般有三大特征:封装.继承.多态. 封装:就是把一些属性和方法封装到一个类里. 继承:就如子类继承父类的一些属性和方法. 多态:就如一个父类有多个不同特色 ...
- Touch Handling in Cocos2D 3.x(三)
取得触摸位置 最有趣的部分是触摸的位置.接下来我们将使用触摸位置在玩家每次点击的屏幕位置上添加精灵.为了完成这项功能我们需要修改touchBegan的实现,替换旧的代码如下: - (void)touc ...
- 【leetcode78】Single Number II
题目描述: 给定一个数组,里面除了一个数字,其他的都出现三次.求出这个数字 原文描述: Given an array of integers, every element appears three ...
- 【翻译】Ext JS最新技巧——2015-1-2
原文:http://www.sencha.com/blog/top-support-tips-january-2015?mkt_tok=3RkMMJWWfF9wsRolvqvIZKXonjHpfsX7 ...
- 《java入门第一季》之Arrays类前传(排序案例以二分查找注意的问题)
根据排序算法,可以解决一些小案例.举例如下: /* * 把字符串中的字符进行排序. * 举例:"dacgebf" * 结果:"abcdefg" * * 分析: ...
- 理解WebKit和Chromium: Web应用和Web运行环境
转载请注明原文地址:http://blog.csdn.net/milado_nju 注:鉴于这一领域非常热,自己也投身其中,会单独开辟一个专题介绍Web应用和Web运行环境. ## 概述 Web已经从 ...
- JavaScript进阶(五)js中取小数整数部分函数
js中取小数整数部分函数 丢弃小数部分,保留整数部分 js:parseInt(7/2) 向上取整,有小数就整数部分加1 js: Math.ceil(7/2) 四舍五入 js: Math.round(7 ...
- infiniDB的论坛
http://infinidb.co/community 包括了基本的内容. 安装目录?
- Obj-C中内存的管理一瞥
注意,ARC仅仅(自动)释放你手工管理的Objective-C类实例的内存, 但是不会释放由C函数或者Core Foundation(Cocoa的底层,C语言的变体)申请的内存.
- windows linux—unix 跨平台通信集成控制系统----文件搜索
跨平台的网络通信,跟设备的集成控制,牵扯到在各种平台下的文件搜索问题,windows下面的已经有了. 地址如下: http://blog.csdn.net/wangyaninglm/article/d ...