如何防止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)

我应该如何仅隐藏/显示内容，而不会在我切换选项卡时丢失任何东西？

- Adam

Answer 1

你可以使用 store 来保存你的数据。所有标签页的数据都将连接到一个 store 中。即使你切换标签页，store 中的数据也不会丢失。因此，下次渲染标签页时，你将拥有上一次渲染中的数据。

- Sudarshan

---

谢谢您的建议。我从概念上理解您的意思，但我该如何实际实现呢？我应该在componentWillUnmount时保存组件状态吗？还是序列化整个组件？我完全不知所措。 - Adam

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

- Melounek