以下のような方法でreact-routerを使ってます
index.tsx
ReactDOM.render( <Provider store={store}> <BrowserRouter> <App /> </BrowserRouter> </Provider>, document.getElementById('root') );
App.tsx
<div className="menu"> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> </ul> </div> <div className="App-intro"> <Switch> <Route exact path="/" component={Home} /> <Route path="/about" component={About} /> <Redirect to="/" /> </Switch> </div>
上記のような設定で問題なく動きますが
ここでAppコンポネントに対してreduxのconnect設定をするとreact-routerが動かなくなりました
設定は以下の通りです。
const AppContainer = connect( mapStateToProps, mapDispatchToProps )(App); ReactDOM.render( <Provider store={store}> <BrowserRouter> <AppContainer /> </BrowserRouter> </Provider>, document.getElementById('root') );
特にエラーとかも発生せずにreact-routerのswitchが効かなくなります。
BrwoserRouterの間に入れるコンポネントはconnectで加工(?)したコンポネントを入れるのはNGでしょうか?
他にconnectをしたコンポネントにrouter設定をする方法がありましたら教えていただけますか?
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。