React Router v4 Redirection ne fonctionne pas
J'ai un parcours qui redirige après la vérification d'une condition comme ceci
<Route exact path="/" render={()=>(
Store.isFirstTime ? <Redirect to="intro" /> : <Home state={Store}/>)}/>
L'url change lorsque la condition est vraie, mais le composant n'est pas monté. Le reste du code du composant est comme ci-dessous.
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>
);
}
Mon Application Composant est contenue dans le BrowserRouter comme thi
ReactDOM.render(<BrowserRouter>
<App/>
</BrowserRouter>,
document.getElementById('root')
);
lorsque je tape l'url directement dans le navigateur comme 'localhost:3000/intro' composant est monté correctement, mais quand il traverse la redirection, il n'affiche pas le composant. Comment puis-je résoudre ce problème?
Modifier
Donc un détail manquait et j'ai essayé de créer un autre projet de reproduire le problème.
Mon Application composant est un observateur de mobx-réagir et il est exporté comme indiqué ci-dessous
let App = observer(class App { ... })
export default App
J'ai créé ce repo avec un exemple de code pour reproduire le problème, vous pouvez l'utiliser
https://github.com/mdanishs/mobxtest/
Ainsi, lorsque les Composants sont emballés dans mobx-réagir observateur de la redirection ne fonctionne pas sinon il fonctionne très bien
source d'informationauteur mdanishs
Vous devez vous connecter pour publier un commentaire.
Le demandeur a posté un question sur GitHub, et reçu ce qui, apparemment inédit caché guide (edit: maintenant publié) qui m'a aidé aussi. Je poste ici parce que j'ai rencontré le même problème et que vous voulez les autres afin d'éviter à notre douleur.
Le problème est que mobx-réagir et réagir-redux fois dans l'approvisionnement de leurs propres
shouldComponentUpdate()
fonctions que seulement prop changements, mais ils réagissent-routeur envoie état vers le bas à travers le contexte. Lorsque les modifications de l'emplacement, il ne change pas tous les accessoires, afin de ne pas déclencher une mise à jour.Le moyen de contourner cela est de passer à l'emplacement vers le bas comme un accessoire. Le guide ci-dessus dresse la liste de plusieurs façons de le faire, mais le plus simple est de simplement conclure que le récipient contenant le
withRouter()
d'ordre supérieur composant:ou, pour redux:
Il vous manque un /devant intro
Être prudent lors de la composition de l'Routeur avec d'autres composants tels que les fournisseurs de services de traduction, thème des fournisseurs, etc .. Après quelques temps, j'ai trouvé que votre Application doit être strictement enveloppé par le Routeur, comme ceci:
Espère que cela aide quelqu'un