リアクタールータv4。経路は見えません。

Question

transition-groupsをさらに実装するためにrouter v3を使用していて、v4に従ってルーティングロジックをリファクタリングし始め、次のコードを思いついた。コンパイル中またはコンソールにエラーはありません。/#/aboutに行くと、空のページが返されます。

index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import Store from './container/store/store'; 
import Container from './container/container'; 


const MOUNT_NODE = document.getElementById('root'); 

const render =() => { 
    const store = Store({}); 

    ReactDOM.render(
     <Container store={store} />, 
    MOUNT_NODE 
); 
}; 


// Hot Module Replacement 
if (module.hot) { 
    module.hot.accept('./routes/index',() => 
    setImmediate(() => { 
     ReactDOM.unmountComponentAtNode(MOUNT_NODE); 
     render(); 
    }) 
    // This method is used to break up long running operations and run a callback function immediately after the browser has completed other operations such as events and display updates. 
); 
}; 

render(); 

container.js（アプリケーションにReduxのをフック）

import React, { Component, PropTypes } from 'react'; 
import { Provider } from 'react-redux'; 
import { HashRouter, Switch, Route } from 'react-router-dom'; 


// Wrap 
import Wrap from '../wrap'; 
import Contact from '../routes/contact'; 


export default class Container extends Component { 
    static propTypes = { 
    store: PropTypes.object.isRequired 
    } 

    shouldComponentUpdate() { 
    return false; 
    } 

    render() { 
    const { store } = this.props; 

    return (
     <Provider store={store}> 
     <HashRouter> 
      <Switch> 
      <Route exact path='/' component={Wrap}/> 
      </Switch> 
      </HashRouter> 
     </Provider> 
    ) 
    } 
} 

wrap.js（指標経路として働きます）

import React, { Component } from 'react'; 
import Header from '../components/header'; 
import styles from './styles/styles.css'; 
import { HashRouter, Switch, Redirect, Route, BrowserRouter, Link} from 'react-router-dom'; 

import About from '../routes/about'; 


export default class Wrap extends Component { 

    constructor(props) { 
    super(props); 
    } 

    render() { 

    return (
     <div> 
     <Header location={this.props.location} /> 
     <Route path='/about' component={About}/> 
     ... other stuff 
     </div> 
    ) 
    } 
} 

Answer 1

<Route path='/' />でexactを省略してください。

exactは、指定されたパスでのみコンポーネントをレンダリングします。