1、首先创建各个组件src-pages-admin-dashboard下的index.js和products下的Edit.js和List.js均为组件
2、配置路由
在src-index.js中配置路由信息
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
//一下为路由的相关组件
import { HashRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import { mainRoutes } from './routes';
import { Provider } from 'react-redux';
import store from './store'
import Login from './pages/Login';
import Edit from './pages/admin/products/Edit';
ReactDOM.render(
<Router>
<Switch>
<Route path="/login" component={Login}></Route>
<Route path="/admin/products" component={Edit}></Route>
</Switch>
</Router>,
document.getElementById('root')
);
reportWebVitals();
对以上配置方法使用路由文件进行改进
在src下新建routes文件
在routes文件下新建index.js
路由分为2类
1类 mainRoutes:登录、404等
2类 adminRoutes:需要验证之后才能访问的管理后台页面
import List from "../pages/admin/products/List";
import Edit from "../pages/admin/products/Edit";
import Login from "../pages/Login";
import Index from "../pages/admin/dashboard/index";
import Notice from "../pages/admin/notice/Index";
import PageNotFound from "../pages/PageNotFound";
import {HomeOutlined,SmileOutlined} from '@ant-design/icons';
//路由配置文件
export const mainRoutes = [{
path:'/login',
component: Login
},{
path:'/404',
component: PageNotFound
}];
export const adminRoutes = [{
path:'/admin/dashboard',
component: Index,
isShow:true,
titile:"看板",
icon: <HomeOutlined />
},
{
path:'/admin/products',
component: List,
//全匹配路径
exact : true,
isShow:true,
titile:"列表",
icon:<SmileOutlined />
},
{
path:'/admin/products/edit/:id?',
component: Edit,
isShow:false
// exact : true,
// strict:true
},
{
path:'/admin/notice',
component: Notice,
isShow:false
// exact : true,
// strict:true
}];
src-index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { HashRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import { mainRoutes } from './routes';
import { Provider } from 'react-redux';
import store from './store'
ReactDOM.render(
<Provider store={store}>
<Router>
<Switch>
{/**
* 以下是简化的部分
*/}
{mainRoutes.map(route => {
return <Route key={route.path} path={route.path} component={route.component} />;
})}
</Switch>
</Router>
</Provider>
,
document.getElementById('root')
);
reportWebVitals();
再将mainroutes循环简化
{mainRoutes.map(route => {
return <Route key={route.path} path={route.path} component={route.component} />;
})}
简化为
{mainRoutes.map(route => {
return <Route key={route.path} {...route} />;
})}
这时候login有效果,但404没有效果(为什么,我也不知道)
访问不到的页面重定向到404
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { HashRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import { mainRoutes } from './routes';
import { Provider } from 'react-redux';
import store from './store'
ReactDOM.render(
<Provider store={store}>
<Router>
<Switch>
{/**
* 以下是简化的部分
*/}
{mainRoutes.map(route => {
return <Route key={route.path} {...route} />;
})}
<Redirect to="/404"></Redirect>
</Switch>
</Router>
</Provider>
,
document.getElementById('root')
);
reportWebVitals();
优化:
当访问/admin路径时候都走APP组件
<Route path="/admin" render={routeProps => <App {...routeProps} />}></Route>
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { HashRouter as Router, Switch, Route, Redirect } from 'react-router-dom';
import { mainRoutes } from './routes';
import { Provider } from 'react-redux';
import store from './store'
ReactDOM.render(
<Provider store={store}>
<Router>
<Switch>
{/**访问/admin路径的都走App组件
*/}
<Route path="/admin" render={routeProps => <App {...routeProps} />}></Route>
{mainRoutes.map(route => {
return <Route key={route.path} {...route} />;
})}
<Redirect to="/404"></Redirect>
</Switch>
</Router>
</Provider>
,
document.getElementById('root')
);
reportWebVitals();
App组件的改造
1、先在App.js里面引入路由组件
import {Switch,Route,Redirect} from 'react-router-dom';
2、循环管理后台的路由
引入路由
import { adminRoutes } from './routes'
循环路由
<div className="App">
<Switch>
{
adminRoutes.map(route=>{
return
<Route key={route.path} path={route.path} exact={route.exact} >
</Route>
})
}
</Switch>
</div>
渲染路由 render
render={routeProps=>{
return <route.component {...routeProps}></route.component>
}}
App.js最终内容如下
import './App.css';
import 'antd/dist/antd.css';
import { Switch, Route, Redirect } from 'react-router-dom'
import { adminRoutes } from './routes'
import Frame from './components/Frame/Index';
import './App.css'
import { isLogined } from './utils/auth'
function App() {
return (isLogined() ?
<Frame className="App">
<Switch>
{
adminRoutes.map(route => {
return (
<Route
key={route.path}
path={route.path}
exact={route.exact}
render={routeProps => {
return <route.component{...routeProps} />;
}}
/>
);
})
}
<Redirect to={adminRoutes[0].path} from="/admin"></Redirect>
<Redirect to="/404"></Redirect>
</Switch>
</Frame> : <Redirect to='/login' />
);
}
export default App;
这样每个组件在访问时候都嵌套在了app组件里面
同样需要配置访问不到 404,在switch组件里面配置
<Redirect to="/404"></Redirect>
如果要新配路由,在routes的index.js里面配置就好
布局
新建一个Frame组件(在antd里面找一个,将props传入该组件,将content替换成props.children这样就能显示内容组件了)然后替代app.js里面的div
路由和二级菜单关联配置
路由配置文件里面routes里面index.js
是否展示isShow titile
{
path:'/admin/products',
component: List,
//全匹配路径
exact : true,
isShow:true,
titile:"列表",
icon:<SmileOutlined />
}
再修改app.js框架组件components-Frame-index.js
在组件里面使用路由需要引入
import {withRouter} from 'react-router-dom';
并在组件结尾套进组件
export default withRouter(Index)
1、引入路由
import { adminRoutes } from '../../routes';
2、过滤路由
const routes = adminRoutes.filter(route=>route.isShow)
3、在<Menu>组件里面写一个循环
<Menu>
{routes.map(route=>{
return <Menu.Item key={route.path}>{route.title} </Menu.Item>
})}
</Menu>
这样框架的左边菜单就会显示你配的路由名称
4、跳转
在menuitem里面添加onclick跳转
<Menu.Item key={route.path} onClick={p=>props.history.push(p.key)}>
源码地址