Wie verhindere ich, dass React Router 4 den URL-Switch erneut rendert?

Question

Ich habe eine harte Zeit zu versuchen, verhindert Reagieren Router 4.1.2 (neuste) aus dem Ausrichten meiner Formulare, wenn ich die Registerkarten in meiner Anwendung wechseln.

Hier ist meine Struktur:

Root-Komponente:

<Route path="/" component={Content}/> 

Inhalt Komponente:

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) 

Wie kann ich/zeigen, verstecken den Inhalt, ohne etwas von den Tabs zu verlieren Ich schalte ab ?

Answer 1

Sie können speichern, um Ihre Daten zu speichern. Alle Daten Ihres Tabs werden mit einem Geschäft verbunden. Selbst wenn Sie die Registerkarte wechseln, gehen die Daten im Geschäft nicht verloren. Wenn Sie also das nächste Mal den Tab rendern, haben Sie die Daten, die im vorherigen Rendering waren.

Answer 2

Sie können alle Ihre Tabs rendern und das Umschalten zwischen Tabs nur aktiv/unactive Klassen von behandelt kann

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

von Makeln Oder wenn Sie wirklich das Formular werden wollen rerendering, sollten Sie folgen @Sudarshan und Verwenden Sie Kontrollierte Komponente https://facebook.github.io/react/docs/forms.html#controlled-components