react+antd后台管理系统（2）构建目录及react-router简单使用

版权声明：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

1. 安装react-router相关包
   npm install react-router react-router-dom --save

2. 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组件部位不同，其他部位完全相同。