记录一下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大功告成
原文地址:https://blog.csdn.net/sinat_39415600/article/details/120413650
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。