下面就来简单介绍其基础使用,更全面的可参考
在页面文件中
在外部脚本文件中
React Router 库的引入,有两种方式
2.1 浏览器直接引入
可以引用 的浏览器版本,或者下载之后引入
然后就可以直接使用 ReactRouter 这个对象了,我们可能会使用到其中的几个属性
- let {
- Router,
- Route,
- IndexRoute,
- Redirect,
- IndexRedirect,
- Link,
- IndexLink,
- hashHistory,
- browserHistory
- } = ReactRouter;
2.2 npm 安装,通过构建工具编译引入
- npm install --save react-router
安装好路由库之后,在脚本文件中引入相关属性
- import {
- Router,
- Route,
- IndexRoute,
- Redirect,
- IndexRedirect,
- Link,
- IndexLink,
- hashHistory,
- browserHistory
- }
- from 'react-router';
因浏览器目前还不能支持 import 与 export 命令,且 babel 工具不会将 require 命令编译,所以我们还得需要如 webpack 等构建工具编译引入
库引入之后,在 ReactDOM 的 render 方法中,就可以使用相关的组件了
最基本的,通过 URL 判断进入哪个页面(组件部件)
- class First extends Component {
- constructor(props) {
- super(props);
- }
- render() {
- return
- First
- }
- }
- class Second extends Component {
- constructor(props) {
- super(props);
- }
- render() {
- return
- Second
- }
- }
- class App extends Component {
- constructor(props) {
- super(props);
- }
- render() {
- return
- }
- }
- render(( < Router history = {
- hashHistory
- } > <Route path = "/"component = {
- App
- }
- />
- <Route path="first" component={First} / > <Route path = "second"component = {
- Second
- }
- />
- </Router > ), document.getElementById('box'));
首先,Router 是一个容器,history 属性定义了是用何种方式处理页面的 URL
:
然后,在容器中使用 Route 组件定义各个路由,通过 path 指定路径(可以看到,是不区分大小写的),通过 component 指定该路径使用的组件
也可以直接在 Router 容器上直接用 routes 属性定义各个路由,如
- let routes = <div > <Route path = "/"component = {
- App
- }
- />
- <Route path="first" component={First} / > <Route path = "second"component = {
- Second
- }
- />
- </div > ;
- render( < Router routes = {
- routes
- }
- history = {
- hashHistory
- } > </Router>, document.getElementById('box'));/
需要注意的是 {routes} 中只能有一个父级,所以这里加了 <div> 标签
另外,路由 Route 也可以嵌套,在上面的例子中,嵌套起来可能更符合实际情况
需要注意的是,这里的 App 在父级,为了获取子级的 First 与 Second 组件,需要在 App 组件中添加 this.props.children 获取
- class App extends Component {
- constructor(props) {
- super(props);
- }
- render() {
- return < div > {
- this.props.children
- } < /div>
- }
- }
- render((
- <Router history={hashHistory}>
- <Route path="/" component={App}>
- <Route path="first " component={First} />
- <Route path="second " component={Second} />
- </Route>
- </Router>
- ),
- document.getElementById('box')
- );"
同样的,可以直接在 Router 中用 routes 属性定义路由
- let routes = <Route path = "/"component = {
- App
- } > <Route path = "first"component = {
- First
- }
- />
- <Route path="second" component={Second} / > </Route>;
- render(<Router routes={routes} history={hashHistory}></Router > ,
- document.getElementById('box'));
除了基本的 Route 之外,IndexRoute、Redirect、IndexRedirect、Link、IndexLink 等,顾名思义
- class First extends Component {
- constructor(props) {
- super(props);
- }
- render() {
- return ( < p > First < IndexLink to = "/"activeStyle = {
- {
- color: 'red'
- }
- } > Basic < /IndexLink>
- </p > )
- }
- }
- class Second extends Component {
- constructor(props) {
- super(props);
- }
- render() {
- return < p > Second < /p>
- }
- }
- class Basic extends Component {
- constructor(props) {
- super(props);
- }
- render() {
- return (
- <ul role="nav">
- <li><IndexLink to="/" activeStyle={{color: 'red'}}>Basic</IndexLink></li>
- <li><Link to=" / first " activeStyle={{color: 'red'}}>First</Link></li>
- <li><Link to=" / Second " activeClass="active ">Second</Link></li>
- </ul>
- )
- }
- }
- class App extends Component {
- constructor(props) {
- super(props);
- }
- render() {
- return <div>
- {this.props.children}
- </div>
- }
- }
- render((
- <Router history={hashHistory}>
- <Route path=" / " component={App}>
- <IndexRoute component={Basic} />
- <Route path="first " component={First} />
- <Route path="second " component={Second} />
- </Route>
- </Router>
- ),
- document.getElementById('box')
- );"
- render(( < Router history = {
- hashHistory
- } > <Route path = "/"component = {
- App
- } > <IndexRoute component = {
- Basic
- }
- />
- <IndexRedirect to="first" / > <Redirect from = "second"to = "first" / ><Route path = "first"component = {
- First
- }
- />
- <Route path="second" component={Second} / > </Route>
- </Router > ), document.getElementById('box'));
path 定义的路由的路径,在 hashHistory 中,它的主页路径是 #/
自定义 Route 路由通过与父 Route 的 path 进行合并,在与主页路径合并,得到最终的路径
:
- <Route path="/hello/:name">
- // 匹配 /hello/michael 和 /hello/ryan
- <Route path="/hello(/:name)">
- // 匹配 /hello, /hello/michael, 和 /hello/ryan
- <Route path="/files/*.*">
- // 匹配 /files/hello.jpg 和 /files/hello.html
- <Route path="/**/*.jpg">
- // 匹配 /files/hello.jpg 和 /files/path/to/file.jpg
而: name 可以通过 this.props.params 中取到
- class First extends Component {
- constructor(props) {
- super(props);
- }
- render() {
- return ( < p > First {
- this.props.params.name
- } < IndexLink to = "/"activeStyle = {
- {
- color: 'red'
- }
- } > Basic < /IndexLink>
- </p > )
- }
- }.. < Route path = "/:name"component = {
- First
- }
- />/
通过 React Dev Tool 也可以看到组件的相关数据
在路由的跳转中,我们可能需要在进入页面或离开页面的时候做一些特殊操作,Route 通过 onEnter 与 onLeave 定义了这两个行为
- <Route path="first" component={First} onEnter={(nextState, replace) => {
- console.log(nextState);
- alert('onEnter');
- // replace('second');
- }} onLeave={() => {
- alert('onLeave');
- }}/>
如上,带两个参数,通过 replace 可以更新路径,把注释去掉后,进入 "/first" 时立马跳转值 "/second",这在检测登录时应该比较有用
更多的使用参见
来源: http://www.phperz.com/article/17/0723/328421.html