質問編集履歴

1 ミス

atemu

atemu score 54

2018/06/07 15:55  投稿

ルートコンポーネントでconnectを使うと上手くルーティングできない
ReactReduxを使い始めました。
```js
import React, { Component } from 'react';
import { Switch, Route, Redirect, Link } from 'react-router-dom';
import UserOnly from './containers/UserOnly';
import Top from './containers/Top';
import Auth from './containers/Auth';
export default class App extends Component {
 render() {
   return (
     <div className="App">
       <ul>
         <li><Link to="/">トップページ</Link></li>
         <li><Link to="/home">ユーザ専用ページ</Link></li>
       </ul>
       <Switch>
         <Route exact path="/" component={Top} />
         <Auth>
           <Route exact path="/home" component={UserOnly} />
         </Auth>
       </Switch>
     </div>
   );
 }
}
```
このようになっているルートコンポーネントを、
```js
import React, { Component } from 'react';
import { Switch, Route, Redirect, Link } from 'react-router-dom';
import UserOnly from './containers/UserOnly';
import Top from './containers/Top';
import Auth from './containers/Auth';
import { connect } from 'react-redux';
import * as actions from '../actions/user';
class App extends Component {
 componentDidMount() {
   this.props.onAuthStateChanged();
 }
 render() {
   return (
     <div className="App">
       <ul>
         <li><Link to="/">トップページ</Link></li>
         <li><Link to="/home">ユーザ専用ページ</Link></li>
       </ul>
       <Switch>
         <Route exact path="/" component={Top} />
         <Auth>
           <Route exact path="/home" component={UserOnly} />
         </Auth>
       </Switch>
     </div>
   );
 }
}
const mapStateToProps = (state) => ({
});
const mapDispatchToProps = dispatch => ({
 onAuthStateChanged() {
   dispatch(actions.onAuthStateChanged());
 }
});
export default connect(mapStateToProps, mapDispatchToProps)(Auth);
export default connect(mapStateToProps, mapDispatchToProps)(App);
```
このようにしたいのですが、これだとルーティングが上手く行きません。
ルートコンポーネントはそもそもコンテナにしてはいけないのでしょうか?
だとしたら、どのように書くのがベストなのでしょうか?
よろしくお願いします。
ちなみに、index.jsはこんなかんじです。
```js
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import { history } from './history';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import configureStore from './configureStore';
const store = configureStore();
ReactDOM.render(
 <Provider store={store}>
   <ConnectedRouter history={history}>
     <App />
   </ConnectedRouter>
 </Provider>,
 document.getElementById('root')
);
registerServiceWorker();
```
他に必要な情報があれば書いていってくれると嬉しいです!
  • React.js

    1393 questions

    Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

  • Redux

    203 questions

    Reduxは、JavaScriptアプリケーションの状態を管理するためのオープンソースライブラリです。ReactやAngularで一般的にユーザーインターフェイスの構築に利用されます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る