时间:2021-05-26
React项目通常都有很多的URL需要管理,最常使用的解决方案就是React Router了,最近学习了一下,主要是看了一下官方的英文文档,加以总结,以备后查。
React Router是做什么的呢,官方的介绍是:
A complete routing library for React,keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in. Make the URL your first thought, not an after-thought.
大意即:让UI组件和URL保持同步,通过简单的API即可实现强大的特性如:代码懒加载,动态路由匹配,路径过渡处理等。
下面是一些React Router的用法:
一 简单渲染Route
有一点需要牢记于心,Router 是作为一个React组件,可以进行渲染。
// ...import { Router, Route, hashHistory } from 'react-router'render(( <Router history={hashHistory}> <Route path="/" component={App}/> </Router>), document.getElementById('app'))这里使用了hashHistory - 它管理路由历史与URL的哈希部分。
添加更多的路由,并指定它们对应的组件
import About from './modules/About'import Repos from './modules/Repos'render(( <Router history={hashHistory}> <Route path="/" component={App}/> <Route path="/repos" component={Repos}/> <Route path="/about" component={About}/> </Router>), document.getElementById('app'))二 Link
// modules/App.jsimport React from 'react'import { Link } from 'react-router'export default React.createClass({ render() { return ( <div> <h1>React Router Tutorial</h1> <ul role="nav"> <li><Link to="/about">About</Link></li> <li><Link to="/repos">Repos</Link></li> </ul> </div> ) }})这里使用了Link 组件,它可以渲染出链接并使用 to 属性指向相应的路由。
三 嵌套路由
如果我们想添加一个导航栏,需要存在于每个页面上。如果没有路由器,我们就需要封装一个一个nav组件,并在每一个页面组件都引用和渲染。随着应用程序的增长代码会显得很冗余。React-router则提供了另一种方式来嵌套共享UI组件。
实际上,我们的app都是一系列嵌套的盒子,对应的url也能够说明这种嵌套关系:
<App> {} <Repos> {} <Repo/> {} </Repos></App>因此,可以通过把子组件嵌套到 公共组件 App上使得 App组件上的 导航栏 Nav 等公共部分能够共享:
// index.js// ...render(( <Router history={hashHistory}> <Route path="/" component={App}> {/* 注意这里把两个子组件放在Route里嵌套在了App的Route里/} <Route path="/repos" component={Repos}/> <Route path="/about" component={About}/> </Route> </Router>), document.getElementById('app'))接下来,在App中将children渲染出来:
// modules/App.js// ... render() { return ( <div> <h1>React Router Tutorial</h1> <ul role="nav"> <li><Link to="/about">About</Link></li> <li><Link to="/repos">Repos</Link></li> </ul> {} {this.props.children} </div> ) }// ...四 有效链接
Link组件和a标签的不同点之一就在于Link可以知道其指向的路径是否是一个有效的路由。
<li><Link to="/about" activeStyle={{ color: 'red' }}>About</Link></li><li><Link to="/repos" activeStyle={{ color: 'red' }}>Repos</Link></li>可以使用 activeStyle 指定有效链接的样式,也可以使用activeClassName指定有效链接的样式类。
大多数时候,我们并不需要知道链接是否有效,但在导航中这个特性则十分重要。比如:可以在导航栏中只显示合法的路由链接。
// modules/NavLink.jsimport React from 'react'import { Link } from 'react-router'export default React.createClass({ render() { return <Link {...this.props} activeClassName="active"/> }})// modules/App.jsimport NavLink from './NavLink'// ...<li><NavLink to="/about">About</NavLink></li><li><NavLink to="/repos">Repos</NavLink></li>可以在NavLink中指定只有 .active 的链接才显示,这样如果路由无效,则该链接就不会出现在导航栏中了。
五 URL参数
考虑下面的url:
/repos/reactjs/react-router
/repos/facebook/react
他们可能对应的是这种形式:
/repos/:userName/:repoName
:后面是可变的参数
url中的可变参数可以通过 this.props.params[paramsName] 获取到:
// modules/Repo.jsimport React from 'react'export default React.createClass({ render() { return ( <div>{} <h2>{this.props.params.repoName}</h2> </div> ) }})// index.js// ...// import Repoimport Repo from './modules/Repo'render(( <Router history={hashHistory}> <Route path="/" component={App}> <Route path="/repos" component={Repos}/> {} <Route path="/repos/:userName/:repoName" component={Repo}/> <Route path="/about" component={About}/> </Route> </Router>), document.getElementById('app'))接下来访问 /repos/reactjs/react-router 和 /repos/facebook/react 就会看到不同的内容了。
六 默认路由
// index.jsimport { Router, Route, hashHistory, IndexRoute } from 'react-router'// and the Home componentimport Home from './modules/Home'// ...render(( <Router history={hashHistory}> <Route path="/" component={App}> {/* 注意这里* /} <IndexRoute component={Home}/> <Route path="/repos" component={Repos}> <Route path="/repos/:userName/:repoName" component={Repo}/> </Route> <Route path="/about" component={About}/> </Route> </Router>), document.getElementById('app'))这里添加了IndexRoute来指定默认的路径 / 所对应的组件。注意它没有path属性值。
同理也有 默认链接组件 IndexLink。、
七 使用Browser History
前面的例子一直使用的是hashHistory,因为它一直可以运行,但更好的方式是使用Browser History,它可以不依赖哈希端口 (#)。
首先需要改 index.js:
// ...// bring in `browserHistory` instead of `hashHistory`import { Router, Route, browserHistory, IndexRoute } from 'react-router'render(({} <Router history={browserHistory}> {} </Router>), document.getElementById('app'))其次需要 修改webpack的本地服务配置,打开 package.json 添加 –history-api-fallback :
复制代码 代码如下:"start": "webpack-dev-server --inline --content-base . --history-api-fallback"
最后需要在 index.html中 将文件的路径改为相对路径:
<!-- index.html --><!-- index.css 改为 /index.css --><link rel="stylesheet" href="/index.css" rel="external nofollow" ><!-- bundle.js 改为 /bundle.js --><script src="/bundle.js"></script>这样就去掉了url中的 # 。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前言React-Router已经发布了多个版本,利用路由导航的使用方法都不大一样,在这里总结一下。React-Router2.0.0版本2.0.0版本需要使用b
本文介绍了React从react-router路由上做登陆验证控制的方法,分享给大家,具体如下:验证代码importReactfrom'react'import
react-router模块化配置因为公司的需要最近踏进了react坑,一直在挖坑填坑,在路由这一块折腾得不行。直接进入主题,配置react-router模块化
react我自己还在摸索学习中,今天正好学习一下react-router4嵌套路由的使用方法,顺便留着笔记先直接贴代码importReactfrom'react
在react-router中组件里面的跳转可以用但是在组件外面改如何跳转,需要用到react路由的historyreplace方法和push方法使用形式一样,r