版权声明:Oreo https://blog.csdn.net/weixin_43154931/article/details/82662297
react+antd后台管理系统(2)构建目录及react-router简单使用
github地址:react-admin后台管理系统(tag v0.2)
1. 目录
├─components
├─layouts
├─pages
│ ├─Form
│ ├─List
│ └─Login
├─redux
│ ├─action
│ ├─reducers
│ └─store
├─services
└─utils
2. 引入react-router
安装react-router相关包
npm install react-router react-router-dom --save
react-router简单使用
基本使用方式是,整个页面的切换使用
import React, { Component } from 'react';
import { HashRouter as Router, Switch, Route } from 'react-router-dom';
const Login = () =>{
return (
<div>hello, this is page login</div>
)
}
const Admin = () =>{
return (
<div>hello, this is page Admin</div>
)
}
class RouterApp extends Component{
render() {
return (
<Router>
<Switch>
<Route path={'/login'} component={Login} />
<Route path={'/admin'} component={Admin} />
</Switch>
</Router>
)
}
}
export default RouterApp;
此时,可以实现的效果是
url:http://localhost:3000/#/login 对应组件(Login);
url:http://localhost:3000/#/admin 对应组件(Admin)
但是一个页面不可能只有一个组件,Admin组件下面一部分子组件的时候
<Route path={'/admin'} component={Admin} />
被替换为
<Route path={'/admin'} render={() =>
<App>
<Route path={'/admin/form/basicForm'} component={BasicForm} />
<Route path={'/admin/form/advancedForm'} component={AdvanceForm} />
</App>
} />
其中,App组件如下
import React, { Component } from 'react';
export default class App extends Component{
render() {
return (
<div>
{this.props.children}
</div>
);
}
}
这样就可以使用react-router实现局部的刷新
此时url:http://localhost:3000/#/admin/form/basicForm
与url:http://localhost:3000/#/admin/form/advancedForm
的区别就在于只有basciForm和advancedForm组件部位不同,其他部位完全相同。