Javascript 如何防止React Router 4在URL交换机上重新呈现?
在切换应用程序中的选项卡时,我很难阻止Resact Router 4.1.2(最新版本)恢复表单 这是我的结构: 根组件:Javascript 如何防止React Router 4在URL交换机上重新呈现?,javascript,reactjs,react-router,react-router-v4,react-router-redux,Javascript,Reactjs,React Router,React Router V4,React Router Redux,在切换应用程序中的选项卡时,我很难阻止Resact Router 4.1.2(最新版本)恢复表单 这是我的结构: 根组件: <Route path="/" component={Content}/> import React, {Component} from 'react' import {connect} from 'react-redux' import {Redirect, Route, Switch} from 'react-router-dom' import {his
<Route path="/" component={Content}/>
import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Redirect, Route, Switch} from 'react-router-dom'
import {history} from 'configureStore'
import * as actions from 'actions/tabs';
import {Divider, Input} from 'semantic-ui-react'
import Tabs from 'components/Tabs'
import Dashboard from 'components/Dashboard'
import ProfileList from 'components/ProfileList'
class Content extends Component {
render() {
const {tabs, switchTab, closeTab} = this.props
let componentByName = {
Dashboard: Dashboard,
ProfileForm: ProfileForm,
ProfileList: ProfileList
}
let routes = []
tabs.forEach((tab) => {
routes.push(<Route key={tab.id} exact path={tab.path} component={componentByName[tab.component]}/>)
})
return (
<div>
<Tabs list={tabs} onClick={switchTab} onCloseClick={closeTab}/>
<Divider hidden/>
<Switch>
{routes}
</Switch>
</div>
)
}
}
const mapStateToProps = (state) => ({
tabs: state.tabs
})
export default connect(mapStateToProps, actions)(Content)
内容组件:
<Route path="/" component={Content}/>
import React, {Component} from 'react'
import {connect} from 'react-redux'
import {Redirect, Route, Switch} from 'react-router-dom'
import {history} from 'configureStore'
import * as actions from 'actions/tabs';
import {Divider, Input} from 'semantic-ui-react'
import Tabs from 'components/Tabs'
import Dashboard from 'components/Dashboard'
import ProfileList from 'components/ProfileList'
class Content extends Component {
render() {
const {tabs, switchTab, closeTab} = this.props
let componentByName = {
Dashboard: Dashboard,
ProfileForm: ProfileForm,
ProfileList: ProfileList
}
let routes = []
tabs.forEach((tab) => {
routes.push(<Route key={tab.id} exact path={tab.path} component={componentByName[tab.component]}/>)
})
return (
<div>
<Tabs list={tabs} onClick={switchTab} onCloseClick={closeTab}/>
<Divider hidden/>
<Switch>
{routes}
</Switch>
</div>
)
}
}
const mapStateToProps = (state) => ({
tabs: state.tabs
})
export default connect(mapStateToProps, actions)(Content)
import React,{Component}来自“React”
从“react redux”导入{connect}
从“react router dom”导入{重定向、路由、交换机}
从“configureStore”导入{history}
从“操作/选项卡”导入*作为操作;
从“语义ui反应”导入{Divider,Input}
从“组件/选项卡”导入选项卡
从“组件/仪表板”导入仪表板
从“组件/配置文件列表”导入配置文件列表
类内容扩展组件{
render(){
const{tabs,switchTab,closeTab}=this.props
让componentByName={
仪表板:仪表板,
ProfileForm:ProfileForm,
ProfileList:ProfileList
}
let routes=[]
tabs.forEach((tab)=>{
推送
})
返回(
{routes}
)
}
}
常量mapStateToProps=(状态)=>({
选项卡:state.tabs
})
导出默认连接(MapStateTrops、操作)(内容)
如何隐藏/显示内容而不丢失切换到的选项卡中的任何内容?您可以使用store保存数据。所有选项卡的数据都将连接到存储。即使切换选项卡,存储中的数据也不会丢失。因此,下次渲染选项卡时,您将获得上一次渲染中的数据。您可以渲染所有选项卡,只需切换活动/非活动类即可在选项卡之间切换
<div className={history.location.pathname === '/path' && "active"}>
<!-- your form or anything -->
</div>
或者,如果您真的想重新提交表单,您应该遵循@Sudarshan并使用受控组件谢谢您的输入。我从概念上理解你所说的,但我实际上如何实现呢?我是否在componentWillUnmount上保存组件的状态?我是否序列化整个组件?我完全迷路了。