谈谈React router4 的坑

作为一个使用react开发的单页面web程序，智库项目放弃了传统的后台返回来管理路径的方式，采用前端管理路径的方式进行渲染。在这里，我们使用react router 4，react router 4 相比以前的版本有一些改变，比如出现了react-router 和 react-router-dom两个包，将<Router>替换为<BrowserRouter>等等。。。

现在来讲一下我在写ReactRouter时候遇到的坑。。。

1. 如何引入？？？

在React Router 4 中有两个包，一个是react-router 一个是react-router-dom，就像react后来将react-dom分出来一样，现在，我们只需要引入react-router-dom，因为现在所需要的Route、BrowserRouter、Link等组件都放在了react-dom中。

2.取消了Router组件，改为默认BrowserRouter组件。

以前，我们可以这么写：

<Router history={hashHistory}>
  <Route exact path="/" component={a}></Route>
  <Route path="/b/:key" component={b}></Route>
 </Router>

现在，我们可以真么写：

<BrowserRouter>
  <Switch>
   <Route exact path="/" component={a}></Route>
   <Route path="/b/:key" component={b}></Route>
  </Switch>
 </BrowserRouter>

3.Link的更新

现在的Link组件，比以往多了许多API，

<Link to={{
  pathname: '/a',
  search: '?key=1'
}} />

to之后可以接object，可以向跳转后的页面传递参数了。

同时也增加了replace的属性，跳转后history中可以覆盖前一个的history，使得返回时直接跳过前一个，这可能在某一写地方可以用到吧。

4.NavLink

增加了一个专门用于导航条的NavLink，使得导航条跳转更加的方便，同时有activeStyle的属性更改active时候的样式：

<NavLink
  to="/about"
  activeStyle={{ fontWeight: 'bold' }}
>MyBlog</NavLink>

more and more，React Router 4 还有很多更新的地方，就只列到这里喽。

简单的React Router 4：

import { Menu, Breadcrumb, Icon } from 'antd'
import React from 'react'
import Sidebar from './common/sidebar'
import {Route} from 'react-router-dom'
import Home from './home';
import Notice from './info/notice';
import News from './info/news';
import FileInfo from './file/fileInfo'
import UserInfo from './user/userInfo';
import Test from './test.js'
import Character from './auth/character';
import CourseSetting from './system/courseSetting';

const SubMenu = Menu.SubMenu;
require('../css/frame.css')

export default class Frame extends React.Component{

    render(){
        return (
            <div className="ant-layout-aside">
                <Sidebar/>
                <div className="ant-layout-main">
                    <div className="ant-layout-header"></div>
                    
                    <div className="ant-layout-container">
                        <div className="ant-layout-content">
                            <div>
                                <Route exact path='/' component={Home}/>
                                <Route path='/notice' component={Notice}/>
                                <Route path='/news' component={News}/>
                                <Route path='/fileInfo' component={FileInfo}/>
                                <Route path='/userInfo' component={UserInfo}/>
                                <Route path='/character' component={Character}/>
                                <Route path='/course' component={CourseSetting}/>
                                <Route path='/a' component={Test}/>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    )
    }
}

谈谈React router4 的坑

猜你喜欢