React-router路由4.0版本用法

Posted dmyxs

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React-router路由4.0版本用法相关的知识,希望对你有一定的参考价值。

第一步:引包两个

命令:cnpm i -S react-router react-router-dom

 

第二步:用路由管理APP页面

1.创建主路由管理页面,在这里使用了路由嵌套

 1 import React, { Component } from ‘react‘;
 2 import { Route, BrowserRouter } from ‘react-router-dom‘
 3 import App from ‘../App‘
 4 import SubRouter from ‘./SubRouter‘ //二级路由
 5 
 6 export default class ReactApp extends Component {
 7   render() {
 8     return (
 9       <BrowserRouter>
10         <App>
11           {/* 这里为了分离得彻底,使用组件嵌套,app组件跳到SubRouter组件*/}
12           <Route path="/" component={SubRouter}></Route>
13         </App>
14       </BrowserRouter>
15     )
16   }
17 }

2.创建二级路由页面,引入组件

 1 import React, { Component } from ‘react‘
 2 import { Route, Switch } from ‘react-router-dom‘
 3 import Home from ‘../Component/Home‘
 4 import Movie from ‘../Component/Movie‘
 5 import About from ‘../Component/About‘
 6 
 7 export default class SubRouter extends Component {
 8   render() {
 9     return (
10       // 路由配置
11       <Switch>
12         <Route exact path="/" component={Home}></Route>
13         <Route exact path=‘/movie‘ component={Movie}></Route>
14         <Route exact path="/about" component={About}></Route>
15       </Switch>
16     )
17   }
18 }

3.在App页面给显示位置,以及设置点击跳转

 1 import React, { Component } from ‘react‘;
 2 import { Link } from ‘react-router-dom‘
 3 export default class App extends Component {
 4   render() {
 5     return (
 6       <div>
 7         {/* 点击路由跳转,使用react-router-dom的Link */}
 8         <ul>
 9           <li>
10             <Link to=‘/‘>首页</Link >
11           </li>
12           <li>
13             <Link to=‘/movie‘>电影</Link >
14           </li>
15           <li>
16             <Link to=‘/about‘>关于</Link >
17           </li>
18         </ul>
19 
20         {/* 在APP主页面,给SubRouter留显示位置*/}
21         {this.props.children}
22       </div>
23     )
24   }
25 }

4.修改index.js需要渲染的组件,由渲染原来的APP改为渲染主路由,因为已经用路由管理App页面了

1 import React from ‘react‘;
2 import ReactDOM from ‘react-dom‘;
3 import AppRouter from ‘./AppRouter/AppRouter‘;
4 import * as serviceWorker from ‘./serviceWorker‘;
5 
6 ReactDOM.render(<AppRouter />, document.getElementById(‘root‘));
7 serviceWorker.unregister();

 

三.页面效果

技术图片

 

四.文件目录

技术图片

 

写得有什么不对的地方,还请大家多多指教,多谢。

以上是关于React-router路由4.0版本用法的主要内容,如果未能解决你的问题,请参考以下文章

react-router@4.0 使用和源码解析

React-router路由3.x版本用法

React-Router 介绍及使用

react-router4.0的使用

react-router 4.0这个路由怎么配置

React-router 4.0 history报错