it-swarm.com.de

React Router V4 aktualisiert URL, aktualisiert jedoch nicht (React, Redux)

Ich versuche, den React-Router V4 zu verwenden, um Routen zu meiner App hinzuzufügen, aber es funktioniert überhaupt nicht. Grundsätzlich versuche ich, die Route mit history.Push programmgesteuert zu ändern, wodurch die Browser-URL aktualisiert wird, aber nichts in der eigentlichen App geändert wird.

HINWEIS: Ich verwende Redux.

Die einzige beantwortete Frage zu diesem Thema ist:

React history.Push () aktualisiert die URL, navigiert aber nicht dazu im Browser

Ich habe jedoch die Antwort auf die obige Frage ausprobiert und funktioniert bei mir nicht.

Hier sind die wichtigen Ausschnitte:

oberste Datei (index.js)

...
ReactDOM.render(
    <BrowserRouter>
        <Provider store={store}>
            <App/>
        </Provider>
    </BrowserRouter>
    , document.getElementById('root'));
...

Komponente mit Routen

...
export default function ContentRouter() {
    return <div className="content">
        <Route exact path="/dashboard" component={TmpDashboard}/>
        <Route exact path="/" component={() => {
            return <h1>Home</h1>
        }}/>
    </div>
}

Komponenten-Pushing-Routen

...
this.handleGroupClick = (group) => {
    this.props.history.Push(`/groups/${group}`);
    this.props.onOpenChange(false);
};
...
export default withRouter(connect(mapStateToProps, mapDispatchToProps(DrawerConnector))

7
sunny-lan

Nach langem Suchen an einem völlig falschen Ort habe ich herausgefunden, was falsch war. Die fehlende Aktualisierung wurde durch Redux verursacht.

Wenn eine Komponente in connect eingeschlossen wird, werden Updates blockiert, und die Ansicht wird nicht aktualisiert.

Die Lösung wird hier erwähnt:

https://github.com/ReactTraining/react-router/issues/4671#issuecomment-285320076

Grundsätzlich muss jede Komponente, die ein Route- oder ein React-Router-Objekt enthält, mit withRouter verpackt werden.

EDIT: Nur die Komponente der obersten Ebene, die connect verwendet, sollte in withRouter eingeschlossen werden. Beachten Sie, dass dies zu Leistungsproblemen führen kann

EDIT: Die Art und Weise, wie ich die verstärkte Kopplung überwunden habe, bestand darin, eine Komponente nur für Routen zu haben. Auf diese Weise muss ich nur diese Komponente und die Komponente mit einem Router umwickeln.

9
sunny-lan

Hier ist ein Setup, das funktioniert:

Die Haupt-App:

class App extends React.Component {

    render() {
        return (
            <BrowserRouter>
                <div>
                   /* this is a common component and happens to need to redirect */
                   <Route component={CommonComponentThatPushesToHistory} />
                   <div id="body">
                       /* I usually place this switch in a separate Routes file */
                       <Switch>
                           <Route exact path="FooRoute" component={FooPage}/>
                           <Route exact path="BarRoute" component={BarPage}/>
                        </Switch>
                   </div>
                   /* another common component which does not Push to history */
                   <Footer />
                </div>
            </BrowserRouter>
        );
    }
}

export default withRouter(App);

CommonComponentThatPushesToHistory

class CommonComponentThatPushesToHistory extends React.Component{
    render(){
        return(
            <button type="button" 
                onClick={() => {this.props.history.Push('some-page');}}>
                Click to get redirected</button>
        );
    }
}

FooPage hat möglicherweise eine untergeordnete Komponente, die zum Verlauf wechselt:

class FooPage extends React.Component{
    render(){
        return(
            <MyChild history={this.props.history} />
        );
    }
}

Dann kann die MyChild-Komponente auf dieselbe Weise wie CommonComponentThatPushesToHistory in den Verlauf wechseln.

0
Hossein