作为一个使用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>
)
}
}