关于react router 4 实践
2018-06-24 02:02:27来源:未知 阅读 ()
详细代码栗子: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中是可以拿到的。
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
上一篇:前端开发常用代码片段(中篇)
- 关于jQuery UI 使用心得及技巧 2020-03-29
- javascript 中关于array的常用方法详解 2020-03-16
- 关于JS array的数组 2020-03-08
- Javascript排序算法的介绍 2019-10-29
- 加载js文件的小脚本 2019-10-25
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash