React-Router的入门

记录一下react-router的学习
1：安装react-router

cnpm install react-router-dom --save

2：定义一个AppRouter.js,导入需要的包

import React from 'react';
import {BrowserRouter as Router,Route,Link} from 'react-router-dom';

3：定义组件

//首页
function Index() {
  return <h2>index</h2>;
}
//列表
function List(){
	return <h2>list</h2>;
}

4：定义路由规则

function AppRouter(){
	return(
		<Router>
			<ul>
				<li><Link to='/'>首页</Link></li>
				<li><Link to='/list'>列表</Link></li>
			</ul>
			<Route exact path='/' component={Index}></Route>
			<Route path='/list' component={List}></Route>
		</Router>
	
	)
	
}

4：导出

export default AppRouter;

5：index.js中引入使用

import App from './AppRouter.js';

ReactDOM.render(<App />, document.getElementById('root'));

6A：优化组件的引入方式
在src下面新建一个page文件夹，存放页面js

//Index.js
import React,{Component} from 'react';

class Index  extends Component{
	render(){
		return(
			<div>index</div>
		)
	}
}

export default Index;
//List.js
import React,{Component} from 'react';
class List  extends Component{
	render(){
		return(
			<div>list222</div>
		)
	}
}

export default List;

6B：修改AppRouter.js

//首页
import Index from './page/Index.js';
//列表
import List from './page/List.js';
``
OK大功告成