Reactjs URL更改但页面不刷新

我正在使用路由器4。我有两个组件1-购物者登录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;

从“React”导入React；
从“道具类型”导入道具类型；
导出类ShopLogin扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
};
}
签名（e）{
e、 预防默认值（）；
this.context.router.history.push（'/shopper'）；
}
render（）{
返回(
签名
);
}
}
ShopLogin.contextTypes={
路由器：PropTypes.object
}
导出默认商店登录名；

我的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'))

从“React”导入React；
从“react dom”导入react dom；
从“./ShopLogin”导入ShopLogin；
从“./购物者”导入购物者；
从“react router dom”导入{HashRouter，Route}；
ReactDOM.render((
)，document.getElementById（'root'））

我的购物者.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;

import React，{Component}来自'React'；
导出类购物者扩展组件{
建造师（道具）
{
超级（道具）；
此.state={
};
}
render（）
{
返回(
你好
);
}
}
导出默认购物者；

它将显示多个组件，因为在路线上，

“/shopper”

。路由通过路径

'/'

成功地检查到ShopLogin组件，并通过路径

'/Shopper'

成功地检查到Shopper组件

我会创建一个父组件，例如Main，它只显示子组件，并像这样定义路由

从react路由器导入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>
        )
}   

类主扩展组件{
render（）{
返回(
{this.props.children}
)
}   

---

尝试重新排列您的路线，并使用精确的属性，并使用开关包装所有路线

<HashRouter>
     <div>
       <Switch>
          <Route path="/" component={ShopLogin} />
          <Route exact path="/shopper" component={Shopper} />
          <Route path="/shopperlogin" component={ShopLogin} />
       </Switch>
      </div>
</HashRouter>

我想你应该在这里使用一个组件，或者我遗漏了什么？它的行为与你试图实现的有什么不同？它与我在点击按钮时所做的有什么不同？我想这条路线也适用于你用按钮按下的“/shopper”url。使用“精确”比如：@user1269009非常感谢！！！它起作用了…你如何识别它？/part1/“与“/part1/part2/part3”url匹配，如果在我的理解中没有与execute一起使用的话。有趣的是，我仍然在试验react，我说对了：DIt对我不起作用。它还发出警告，不能使用route下的route。