如何防止React Router 4在URL切換時重新呈現？

Question

當我在我的應用程序中切換選項卡時，我很難阻止 React 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 {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)

如何隱藏/顯示內容而不會丟失我切換的選項卡中的任何內容？

Answer 1

您可以使用商店來保存您的數據。 所有標簽的數據都將連接到商店。 即使您切換選項卡，商店中的數據也不會丟失。 因此，下次渲染選項卡時，您將獲得先前渲染中的數據。

Answer 2

您可以通過切換活動/非活動類來處理所有選項卡並在選項卡之間切換

<div className={history.location.pathname === '/path' && "active"}>
  <!-- your form or anything -->
</div>

或者，如果您真的想要重新呈現表單，則應該關注@Sudarshan並使用受控組件https://facebook.github.io/react/docs/forms.html#controlled-components