web-dev-qa-db-ja.com

React Router v4 Redirect not working

私はこのような状態をチェックした後にリダイレクトするルートを持っています

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

条件はtrueであるが、コンポーネントがマウントされていない場合、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>
    );
  }

私のアプリコンポーネントは、thiのようにBrowserRouterに含まれています

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

「localhost：3000/intro」コンポーネントのように、ブラウザで直接URLにアクセスすると、コンポーネントは正常にマウントされますが、リダイレクトを通過してもコンポーネントは表示されません。どうすれば修正できますか？

編集

そのため、詳細が1つ欠けていたため、別のプロジェクトを作成して問題を再現しようとしました。私のアプリコンポーネントはmobx-reactのオブザーバーであり、以下に示すようにエクスポートされます

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

このレポは、使用できる問題を再現するためのサンプルコードで作成しました https://github.com/mdanishs/mobxtest/

したがって、コンポーネントがmobx-reactオブザーバーにラップされている場合、リダイレクトは機能していません。

javascriptreactjsreact-routerreact-router-v4
23
mdanishs

質問者は issue をGitHubに投稿し、これは明らかに未公開です hidden guide （編集：今 published ）助けてくれました。同じ問題にぶつかり、他の人に痛みを避けてほしいので、ここに投稿しています。

問題は、mobx-reactとreact-reduxの両方がプロップの変更のみをチェックする独自のshouldComponentUpdate()関数を提供するが、react-routerはコンテキストを通じて状態を送信することです。場所が変更されても、小道具は変更されないため、更新はトリガーされません。

これを回避する方法は、小道具として場所を渡すことです。上記のガイドには、いくつかの方法がリストされていますが、最も簡単なのは、コンテナをwithRouter()高次コンポーネントでラップすることです。

export default withRouter(observer(MyComponent))

または、reduxの場合：

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

翻訳プロバイダー、テーマプロバイダーなどの他のコンポーネントを使用してルーターを構成する場合は注意してください。しばらくすると、次のようにアプリをルーターで厳密にラップする必要があることがわかりました。

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

これが誰かを助けることを願っています

3
Kornelius

イントロの前に/がありません

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

RenderメソッドではRedirectのみをレンダリングする必要があります

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

しかし、これはRedirectコンポーネントを使用しない私のお気に入りのソリューションです

  1. インポート_import { withRouter } from 'react-router-dom';_
  2. export default withRouter(MyComponent);
  3. 最後に、アクションメソッドで、handlingButtonClick
_    handlingButtonClick = () => {
        this.props.history.Push("/") //doing redirect here.
    }
_
1
nokieng