background
We need to develop a management platform, and place pages such as login, registration, and website homepages that do not require user information to be loaded outside the system
Inside the system is a page that needs to verify the user's identity and role.
File structure
Note: Output file tree and filetree ./src /F
│ Page file entry │ jsFile entry │ ├─actions │ │ ├─containers │ │ fillinglayoutIn-housecontentpart │ │ 系统页面In-house布局，Includes menu navigation │ │ The page is lost │ │ │ │ │ ├─account │ │ │ │ │ ├─clients │ │ │ │ │ ├─firms │ │ │ │ │ ├─index │ │ │ │ │ │ │ ├─login │ │ │ │ │ └─resetpassword │ │ └─ xxxxx···
Outermost routing
import React from 'react';
import {render} from 'react-dom';
import {Provider} from 'react-redux';
import { HashRouter as Router, Route, Switch } from 'react-router-dom';
const IndexPage = require('./containers/index/index').default;
const Layout = require('./containers/layout').default;
const Login = require('./containers/login').default;
const RestPassWord = require('./containers/resetpassword').default;
const NotFoundPage = require('./containers/noPage').default;
import configureStore from './store';
import './'
const store = configureStore();
render(
<Provider store={store}>
<Router>
<Switch>
<Route path="/main" component={Layout} /> //Fuzzy matching, as long as there is /main in the route, the Layout component will be loaded <Route exact path="/index" component={IndexPage} /> // Exact match <Route exact path="/login" component={Login} />
<Route exact path="/reset" component={RestPassWord} />
<Route component={NotFoundPage} />
</Switch>
</Router>
</Provider>, ('root')
);
Secondary routing
In the Layout component, continue to match the route
# Layout
import React, { Component } from 'react';
import { Layout, Menu, Avatar, Icon , Dropdown} from 'antd';
import {Link} from 'react-router-dom';
import ContentMain from './contentMain';
import { createHashHistory } from 'history';
import './';
const history = createHashHistory();
const { Header, Content, Footer, Sider } = Layout;
const { SubMenu } = Menu;
export default class LayoutPagae extends Component {
state = {
collapsed: false,
user: 'Liz',
};
onCollapse = collapsed => {
(collapsed);
({ collapsed });
};
handleLoginOut = e => {
();
('/login');
};
render() {
const menu = (
<Menu>
<>
<Link to={'/main/personal'}>Personal Center</Link>
</>
<>
<div onClick={}>quit</div>
</>
</Menu>
);
return (
<Layout style={{ minHeight: '100vh' }}>
<Sider collapsible collapsed={} onCollapse={}>
<div className="logo"> CRM </div>
<Menu theme="dark" defaultSelectedKeys={['person']} defaultOpenKeys={['table']} mode="inline">
<SubMenu
key="person"
title={
<span>
<Icon type="user" />
<span>Individual Customers</span>
</span>
}
>
< key="table"><Link to={'/main/client/table'}>Individual Customers表</Link></>
< key="new"><Link to={'/main/client/new'}>添加Individual Customers</Link></>
</SubMenu>
<SubMenu
key="firms"
title={
<span>
<Icon type="team" />
<span>Corporate Customers</span>
</span>
}
>
< key="table"><Link to={'/main/firms/table'}>Corporate Customers表</Link></>
< key="new"><Link to={'/main/firms/new'}>添加Corporate Customers</Link></>
</SubMenu>
<SubMenu
key="account"
title={
<span>
<Icon type="area-chart" />
<span>Performance Summary</span>
</span>
}
>
< key="table"><Link to={'/main/account/table'}>Performance Summary表</Link></>
< key="new"><Link to={'/main/account/new'}>Add new deals</Link></>
</SubMenu>
</Menu>
</Sider>
<Layout>
<Header>
<Dropdown overlay={menu}>
<Avatar style={{ backgroundColor: '#f56a00', verticalAlign: 'middle' }} size="large">
{}
</Avatar>
</Dropdown>
</Header>
<Content style={{ margin: '0 16px' }}>
<ContentMain />
</Content>
<Footer style={{ textAlign: 'center' }}>Ant Design ©2018 Created by Ant UED</Footer>
</Layout>
</Layout>
);
}
}
contentMain component
import React from 'react';
import {HashRouter as Router,Route, Switch} from 'react-router-dom';
import ClientsTable from './clients/table';
import ClientsNew from './clients/new';
import FirmsTable from './firms/table';
import FirmsNew from './firms/new';
import AccountTable from './account/table';
import AccountNew from './account/new';
import Personal from './personal';
class ContentMain extends {
render() {
return (
<div>
<Router>
<Switch>
<Route exact path='/main/client/table' component={ClientsTable}/> //Everything matches exactly <Route exact path='/main/client/new' component={ClientsNew}/>
<Route exact path='/main/firms/table' component={FirmsTable}/>
<Route exact path='/main/firms/new' component={FirmsNew}/>
<Route exact path='/main/account/table' component={AccountTable}/>
<Route exact path='/main/account/new' component={AccountNew}/>
<Route exact path='/main/personal' component={Personal}/>
</Switch>
</Router>
</div>
)
}
}
export default ContentMain
Summarize
The above is personal experience. I hope you can give you a reference and I hope you can support me more.