如图
1.点击左侧的菜单(分步表单),初始化右侧显示的是:分步表单第一步,对应地址栏是:localhost:3333/step-form
2.点击下一步显示:分步表单第二步,对应地址栏是:localhost:3333/step-form/confirm
- route.js
import React from 'react';
import { BrowserRouter as Router,Route,Switch,Redirect} from 'react-router-dom';
import { createHashHistory } from 'history';
import createHistory from 'history/createHashHistory';
import Analysis from './router/Dashboard/Analysis';
import Monitor from './router/Dashboard/Monitor';
import BasicForm from './router/Form/BasicForm';
import StepForm from './router/Form/StepForm';
import Confirm from './router/Form/Confirm';
import BasicTable from './router/Table/BasicTable';
import Login from './router/User/Login';
import Register from './router/User/Register';
import Main from './components/Layout/Main';
const Routes = (
<Router>
<Main>
<Switch>
<Route path="/basic-table" component={BasicTable}/>
<Route path="/monitor" component={Monitor}></Route>
<Route path="/analysis" component={Analysis}></Route>
<Route path="/basic-form" component={BasicForm}></Route>
<Route path="/step-form"
render={() =>
<div>
<Switch>
<Route path="/step-form/confirm" component={Confirm}></Route>
<Route path="/step-form" component={StepForm}></Route>
</Switch>
</div>
}
>
</Route>
<Route path="/login" component={Login}></Route>
<Route path="/register" component={Register}></Route>
<Route exact path="/" component={BasicTable}></Route>
</Switch>
</Main>
</Router>
);
export default Routes;
2.左侧菜单Main.js
import React from 'react';
// import Sider from './Sider';
import Content from './Content';
import styles from './Layout.less';
import elk from '../../images/elk.png';
import Analysis from '../../router/Dashboard/Analysis';
import Monitor from '../../router/Dashboard/Monitor';
import BasicForm from '../../router/Form/BasicForm';
import StepForm from '../../router/Form/StepForm';
import Confirm from '../../router/Form/Confirm';
import BasicTable from '../../router/Table/BasicTable';
import Login from '../../router/User/Login';
import Register from '../../router/User/Register';
import Header from './Header';
import classNames from 'classnames'
import {Link,Route,Switch,Redirect,BrowserRouter as Router} from 'react-router-dom';
import {connect} from 'react-redux';
import {getRouteData} from '../../utils/utils';
const data = [
{
component:'BasicLayout',
layout:'BasicLayout',
name:'首页',
path:'',
children:[
{
name:'Dashboard',
icon:'dashboard',
path:'dashboard',
children:[
{
name:'分析页',
path:'analysis',
component:Analysis
},
{
name:'监控页',
path:'monitor',
component:Monitor
},
]
},
{
name:'表单页',
icon:'form',
path:'form',
children:[
{
name:'基础表单',
path:'basic-form',
component:BasicForm
},
{
name:'分步表单',
path:'step-form',
component:StepForm,
children:[
{
path:'/step-form/confirm',
component:Confirm
}
]
}
]
},
{
name:'列表页',
icon:'table',
path:'table',
children:[
{
name:'基础表格',
path:'basic-table',
component:BasicTable,
}
]
},
{
name:'User',
icon:'users',
path:'user',
children:[
{
name:'登录页面',
path:'login',
component:Login,
},
{
name:'注册页面',
path:'register',
component:Register,
}
]
}
]
}
];
class Main extends React.Component{
constructor(props){
super(props);
}
componentDidMount(){
const pathname = window.location.pathname.slice(1);
//F5刷新后重新dispatch改变状态
this.props.lineHeightAction(pathname);
}
checkSecond( name ){
return name === this.props.secondIndex ? `${styles['active']}` : `${styles['tab_title']}`
}
checkFirst = (name) =>{
return name === this.props.firstIndex ? `${styles['show']}` : `${styles['secondMain']}`
}
render(){
const cloums = data[0].children;
console.log(this.props, "总main页");
// console.warn(this.props);
// const NavData = getRouteData('BasicLayout');
// console.log(NavData,'\\\\\\\\\\');
const {
active,
firstIndex,
secondIndex,
firstIndexAction,
checkSecondAction,
} = this.props;
return(
<Router>
<div className={styles.container}>
<div className={styles.sider_main}>
<div className={styles.logo}>
<span><img src={elk}/></span>
<h3>My Project</h3>
</div>
<ul className={styles.sider}>
{
cloums.map((item)=>{
const secondItem = item.children;
return(
<li key={item.path}>
<div className={styles.firstIndex_class} onClick={ firstIndexAction.bind(this,item.path)}>
<span className={styles.bg_img}>
<img src={`./src/images/${item.icon}.png`}/>
</span>
{item.name}
</div>
<ol className={this.checkFirst(item.path)}>
{
secondItem.map((second,index)=>{
return(
// <li className={this.checkSecond(second.path)} onClick={checkSecondAction.bind(this,second.path)} key={second.path}>
<li className={this.checkSecond(second.path)} onClick={checkSecondAction.bind(this,second.path)} key={second.path}>
{/* <Link to={"/"+item.path+"/"+second.path} className={styles.link_a}>{second.name}</Link> */}
<Link to={"/"+second.path} className={styles.link_a}>{second.name}</Link>
</li>
)
})
}
</ol>
</li>
)
})
}
</ul>
{/* <Sider /> */}
</div>
<div className={styles.content_box}>
<Header/>
<div className={styles.view}>
{this.props.children}
</div>
{/* <Switch className={styles.view}>
{
NavData.map((item) => (
<Route
exact={item.exact}
key={item.path}
path={item.path}
component={item.component}
>
</Route>
))
}
<Redirect to="/table/basic-table"/>
</Switch> */}
</div>
</div>
</Router>
)
}
}
function mapStateToProps(state){
// console.log(state);
const {
active,
firstIndex,
secondIndex,
stepFormPage
} = state
return {
active,
firstIndex,
secondIndex,
stepFormPage
}
}
function mapDispatchToProps(dispatch){
return {
firstIndexAction:(path) => dispatch({type:path}),
checkSecondAction:(path) => dispatch({type:path}),
//F5刷新
lineHeightAction:(pathname) => {
const params = {};
const firstItem = data[0].children
firstItem.map((item) => {
let secondItem = item.children;
secondItem.map((secondItem) => {
if(secondItem.path == pathname){
params.type = pathname;
params.lineHeight = item.path;
}
})
})
// console.log(window.localStorage);
// window.localStorage.setItem('menu',{firstIndex:pathname,secondIndex:item.path})
dispatch({type:params})
}
}
}
export default connect(mapStateToProps,mapDispatchToProps)(Main);
3.index.js
import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import Routes from './route'
import { BrowserRouter} from 'react-router-dom';
import Store from './redux/store/index';
ReactDOM.render(
// Routes
//增加了redux,想使用store,就要借助好基友Provider
<Provider store = {Store}>
{Routes}
</Provider>
,
document.getElementById('app')
);
总结:搞了大半天才拼出来,觉得还是对react-router@4理解的不是很深入,不知道怎样用router4来实现自己的深层嵌套的分步表单,还是要多理解后再开始写。