React-Router 4 路由嵌套实现的分步表单
来源：互联网 发布：ubuntu 14.04 提权 编辑：程序博客网 时间：2024/05/22 14:32
如图
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来实现自己的深层嵌套的分步表单，还是要多理解后再开始写。
阅读全文
0 0
- React-Router 4 路由嵌套实现的分步表单
- React-Router 4.2 的嵌套路由实现
- reactjs router 4 (react-router-dom)使用嵌套路由遇到的问题
- react-router V4 版本不能嵌套路由的问题
- 一个完整的react router 4.0嵌套路由的例子如下
- Vue-router嵌套路由的使用
- vue-router： 嵌套路由
- vue-router： 嵌套路由
- vue-router -- 嵌套路由
- vue-router嵌套路由
- React-router路由实践
- React-router路由实践
- react-router路由
- React-router路由实践
- react-router 路由匹配
- react-router 路由
- 前端路由实现与 react-router 源码分析 React
- 前端路由实现与 react-router 源码分析 React
- 记录或转发各项开发技术总结，发扬光大一下CSDN的分享精神
- 十、Docker网络以及跨宿主机通信
- Maven工程中解决Tomcat端口的冲突问题
- Android开发：最全面、最易懂的Webview使用详解
- 缓存
- React-Router 4 路由嵌套实现的分步表单
- 媒体查询使用方法@media
- HTC打算一条道走到黑，开始资助「脑后插管操作」
- 分布式任务调度平台XXL-JOB
- js 秒转换时分秒格式
- mapred-site.xml的参数说明
- 身份证识别软件API简介
- pandas教程----------Dataframe筛选数据（12/4）
- view 的通用的左滑 删除
