URL change but page doesn't refresh
I am using react router 4. I have two components - ShopLogin 2 - Shopper. I am trying to redirect from a ShopLogin component to a Shopper component after a button is clicked. Everything works fine. The url also changes after clicking the button. I also see "Hello". But the problem is that I can see both components in the browser after clicking the button. the component does not refresh. not sure why this is happening. Below is my code.
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;
My 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'))
My 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;
source to share
It will show several components as it enters the route '/shopper'
. The routes are successfully validated by the ShopLogin Component with the outline '/'
and it successfully validates the Buyer Component with the path '/shopper'
.
I would create a parent component for example. The main thing is that just represents the child components and defines routes like this
-
import IndexRoute from reactive router
import { HashRouter,Route, IndexRoute } from 'react-router-dom';
-
enter your routes into
<HashRouter> <Route path='/' component={Main}> <Route path='/shopper' component={Shopper} /> <IndexRoute component={ShopLogin} /> </Route> </HashRouter>
-
Create your parent component for ShopLogin and Shopper components
class Main extends Component { render(){ return ( <div> {this.props.children} </div> ) }
source to share
Try reordering the routes and use the exact attribute and wrap all routes with Switch .
<HashRouter>
<div>
<Switch>
<Route path="/" component={ShopLogin} />
<Route exact path="/shopper" component={Shopper} />
<Route path="/shopperlogin" component={ShopLogin} />
</Switch>
</div>
</HashRouter>
source to share