webentwicklung-frage-antwort-db.com.de

React Router v4 Redirect funktioniert nicht

Ich habe eine Route, die umgeleitet wird, nachdem ein Zustand wie dieser überprüft wurde

<Route exact path="/" render={()=>(
Store.isFirstTime ? <Redirect to="intro" /> : <Home state={Store}/>)}/>

Die URL ändert sich, wenn die Bedingung erfüllt ist, die Komponente jedoch nicht bereitgestellt ist. Der Rest des Komponentencodes ist wie folgt.

render() {
    return (
      <div>
        ...
        <Route exact path="/" render={()=>(
          Store.isFirstTime ? <Redirect to="intro" /> : <Home state={Store} />         
        )} />
        <Route path="/intro" render={()=>(<IntroWizard state={Store.userInfo}/>)} />
        <Route path="/home" render={()=>(<Home state={Store}/>)} />
        <Route render={()=>(<h1>404 Not Found</h1>)} />
        <Footer />
      </div>
    );
  }

Meine App-Komponente ist wie diese im BrowserRouter enthalten

ReactDOM.render(<BrowserRouter>
    <App/>
</BrowserRouter>,
  document.getElementById('root')
);

wenn ich die URL direkt im Browser drücke, wie zum Beispiel 'localhost: 3000/intro', wird die Komponente erfolgreich gemountet, aber wenn sie die Umleitung durchläuft, wird sie nicht angezeigt. Wie behebe ich das?

Bearbeiten

Daher fehlte ein Detail und ich versuchte, ein anderes Projekt zu erstellen, um das Problem zu reproduzieren. Meine App-Komponente ist ein Beobachter von mobx-react und wird wie unten gezeigt exportiert

let App = observer(class App { ... })
export default App

Ich habe dieses Repo mit einem Beispielcode erstellt, um das Problem zu reproduzieren. Sie können ihn verwenden https://github.com/mdanishs/mobxtest/

Wenn also Komponenten in mobx-react observer eingebunden sind, funktioniert die Umleitung nicht, ansonsten funktioniert sie einwandfrei

javascriptreactjsreact-routerreact-router-v4
23
mdanishs

Der Fragesteller hat ein Problem auf GitHub gepostet und dieses anscheinend unveröffentlichte verstecktes Handbuch (edit: now veröffentlicht ) bekommen, das mir auch geholfen hat. Ich poste es hier, weil ich auf dasselbe Problem gestoßen bin und möchte, dass andere unseren Schmerz vermeiden.

Das Problem ist, dass mobx-react und react-redux beide ihre eigenen shouldComponentUpdate() -Funktionen bereitstellen, die nur nach Änderungen an den Requisiten suchen, aber den Status von react-router über den Kontext nach unten senden. Wenn sich der Speicherort ändert, werden keine Requisiten geändert, sodass kein Update ausgelöst wird.

Der Weg dahin ist, den Ort als Requisite weiterzugeben. In der obigen Anleitung sind verschiedene Möglichkeiten aufgeführt, die einfachste ist jedoch, den Container mit der withRouter() Komponente höherer Ordnung zu umschließen:

export default withRouter(observer(MyComponent))

oder für Redux:

export default withRouter(connect(mapStateToProps)(MyComponent))
41
neurozero

Seien Sie vorsichtig, wenn Sie den Router mit anderen Komponenten wie Übersetzungsanbietern, Themenanbietern usw. zusammenstellen. Nach einiger Zeit stellte ich fest, dass Ihre App vom Router streng verpackt werden muss.

<Provider store={store}>
  <ThemeProvider theme={theme}>
    <TranslationProvider
      namespaces={['Common', 'Rental']}
      translations={translations}
      defaultNS={'Common'}
    >
      <Router>
        <App />
      </Router>
    </TranslationProvider>
  </ThemeProvider>
</Provider>

Hoffe das hilft jemandem

3
Kornelius

Du vermisst ein/vor dem Intro

<Route exact path="/" render={()=>(
  Store.isFirstTime ? <Redirect to="/intro" /> : <Home state={Store} />         
)} />
2
Tyler McGinnis

Sie sollten in Ihrer Rendermethode nur Redirect rendern

render(){
   return (<Redirect to="/" />);
}

aber hier ist meine Lieblingslösung ohne Redirect Komponente

  1. importieren import { withRouter } from 'react-router-dom';
  2. export default withRouter(MyComponent);
  3. Nehmen Sie schließlich in Ihrer Aktionsmethode an, dass handlingButtonClick
    handlingButtonClick = () => {
        this.props.history.Push("/") //doing redirect here.
    }
1
nokieng