reactjs - 网址更改，但页面未刷新

我正在使用React Router4。我有两个组件1-ShopLogin 2-购物者。单击按钮后，我试图从ShopLogin组件重定向到Shopper组件。
一切正常。单击按钮后，URL也在更改。我也可以看到“你好”。
但是问题是单击按钮后，我能够在浏览器上看到这两个组件。组件未刷新。不知道为什么会这样。下面是我的代码。

import React from 'react';
import PropTypes from 'prop-types';


export class ShopLogin extends React.Component {
constructor(props) {
    super(props);
    this.state = {
    };
}
SignIn(e) {
    e.preventDefault();
    this.context.router.history.push('/shopper');

}

render() {
    return (
        <div>
        <button onClick={this.SignIn.bind(this)}>SignIn</button>
        </div>
    );
    }
   }

ShopLogin.contextTypes = {
router: PropTypes.object
}


export default ShopLogin;

我的Index.js

import React from 'react';

import ReactDOM from 'react-dom';

import ShopLogin from './ShopLogin';

import Shopper from './Shopper';

import { HashRouter,Route } from 'react-router-dom';


 ReactDOM.render((

 <HashRouter>

  <div>

  <Route path="/" component={ShopLogin} />

  <Route path="/shopperlogin" component={ShopLogin} />

  <Route path="/shopper" component={Shopper} />

   </div>
 </HashRouter>
   ), document.getElementById('root'))

我的Shopper.js

import React, { Component } from 'react';


export class Shopper extends Component {

 constructor(props)
{

super(props);

   this.state = {
    };

}

 render()
 {

return (
  <div>
 Hello   </div>
);
}
}


export default Shopper;

最佳答案

自路由'/shopper'以来，它将显示多个组件。路由成功检查到路径为'/'的ShopLogin组件，并且成功检查到路径为'/shopper'的购物者组件。

我会创建一个父组件仅显示子组件并定义路线的Main


从react-router导入IndexRoute

import { HashRouter,Route, IndexRoute } from 'react-router-dom';

利用您的路线

<HashRouter>
    <Route path='/' component={Main}>
        <Route path='/shopper' component={Shopper} />
        <IndexRoute component={ShopLogin} />
    </Route>
</HashRouter>

为ShopLogin和Shopper组件创建父组件

class Main extends Component {
    render(){
        return (
            <div>
                {this.props.children}
            </div>
        )
}