react路由 V6之前的版本

初步使用

• 界面需要单一元素在外围包裹
• 路径匹配加exact才能保证匹配一模一样

 import {BrowserRouter,Route} from 'react-router-dom'
 ......
 <div>
 <Header/>
 <BrowserRouter>
 	<Fragment>
		<Route path="/" exact render={()=><div>222</div>}></Route>
		<Route path="/detail" exact render={()=><div>detail</div>}></Route>
		
 	</Fragment>
 </BrowserRouter>
 </div>

react组件路由

• component={Home}以这种形式引入

import Home from './pages/home'
import Detail from './pages/detail'
......
<BrowserRouter>
	<Fragment>
	<Route path="/" exact component={Home}></Route>
	<Route path="/detail" exact component={Detail}></Route>
	</Fragment>
</BrowserRouter>

url传递

 import React, { PureComponent } from 'react';
 import { connect } from 'react-redux';
 import { RecommendWrapper, RecommendItem } from '../style';
 
 class Recommend extends PureComponent {
 	render() {
 		return (
 			<RecommendWrapper>
 				{
 					this.props.list.map((item) => {
 						return <RecommendItem imgUrl={item.get('imgUrl')} key={item.get('id')}/>
 					})
 				}
 			</RecommendWrapper>
 		)
 	}
 }
 
 const mapState = (state) => ({
 	list: state.getIn(['home', 'recommendList'])
 })
 
 export default connect(mapState, null)(Recommend);

export const RecommendItem = styled.div`
	width: 280px;
	height: 50px;
	background: url(${(props) => props.imgUrl});
	background-size: contain;
`;

跳转路由和传参

 import { Link } from 'react-router-dom';
 <Link key={index} to={'/detail/' + item.get('id')}>
 	<ListItem >
 		......
 	</ListItem>
 </Link>
 ......
 <Route path='/detail/:id' exact component={Detail}></Route>
 ......
 在详情页拿到id match.params.id
 componentDidMount() {
 	this.props.getDetail(this.props.match.params.id);
 }
 另一种写法
 <Link key={index} to={'/detail?id=' + item.get('id')}>
 	<ListItem >
 		......
 	</ListItem>
 </Link>
 那么path='/detail' 不需要加/:id就可匹配上
 <Route path='/detail' exact component={Detail}></Route>
 不过获取id需要从this.props.match.location.search中解析

重定向

 import { Redirect } from 'react-router-dom';
 
 class Write extends PureComponent {
 	render() {
 		const { loginStatus } = this.props;
 		if (loginStatus) {
 			return (
 				<div>写文章页面</div>
 			)
 		}else {
 			return <Redirect to='/login'/>
 		}
 	}
 }

异步组件和react-loadable

cnpm i --save react-loadable

 import React from 'react';
 import Loadable from 'react-loadable';
 
 
 在需要异步加载index.js下新建一个loadable.js
 const LoadableComponent = Loadable({
   loader: () => import('./'),
   loading() {
   	return <div>正在加载</div>
   }
 });
 
 export default () => <LoadableComponent/>
同时在主页导入
import Detail from './pages/detail/loadable.js';
......
<BrowserRouter>
      		<div>
            <Header />
      			<Route path='/' exact component={Home}></Route>
            <Route path='/login' exact component={Login}></Route>
            <Route path='/write' exact component={Write}></Route>
      			<Route path='/detail/:id' exact component={Detail}></Route>
      		</div>
</BrowserRouter>

用react-loadable插件加载异步组件，为拿到参数等，需要调用withRouter方法
import { withRouter } from 'react-router-dom';
export default connect(mapState, mapDispatch)(withRouter(Detail));