React Router V4 перенаправление не работает

у меня есть маршрут, который перенаправляет после проверки состояния такой

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

url-адрес изменяется, когда условие истинно, но компонент не монтируется. Остальная часть кода компонента приведена ниже.

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>
    );
  }

мой компонент приложения содержится в BrowserRouter, как thi

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

когда я нажимаю url-адрес непосредственно в браузере, например, компонент "localhost: 3000 / intro" успешно монтируется, но когда он проходит перенаправление не отображает компонент. Как это исправить?

редактировать

Итак, одна деталь отсутствовала, и я попытался создать другой проект для воспроизведения проблемы. Мой компонент приложения является наблюдателем от mobx-react и экспортируется, как показано ниже

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

Я создал это РЕПО с образцом кода, чтобы воспроизвести проблему, которую вы можете использовать https://github.com/mdanishs/mobxtest/

так когда компоненты обернуты в наблюдателя mobx-react redirect не работает, иначе он работает нормально

12
javascript react-router react-router-v4 reactjs

3 ответов

спрашивающий написал вопрос на GitHub, и получил это, по-видимому, неопубликованное скрытый руководства (edit: now опубликовано) это мне тоже помогло. Я размещаю его здесь, потому что столкнулся с той же проблемой и хочу, чтобы другие избегали нашей боли.

проблема в том, что mobx-react и react-redux оба поставляют свои собственные shouldComponentUpdate() функции, которые только проверяют изменения prop, но реагируют-маршрутизатор отправляет состояние вниз через контекст. Когда расположение изменения, он не меняет реквизит, поэтому он не запускает обновление.

способ обойти это, чтобы передать расположение вниз в качестве опоры. В приведенном выше руководстве перечислены несколько способов сделать это, но проще всего просто обернуть контейнер с помощью withRouter() высшего порядка компонентов:

export default withRouter(observer(MyComponent))

или, для redux:

export default withRouter(connect(mapStateToProps)(MyComponent))
29

вы пропускаете a / перед введением

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

будьте осторожны при составлении маршрутизатора с другими компонентами, такими как поставщики переводов, поставщики тем и т. д.. Через некоторое время я обнаружил, что ваше приложение должно быть строго обернуто маршрутизатором, например:

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

надеюсь, это поможет кому-то

2