I cannot redirect to "/" path via react-router
. My App.jsx
file looks like:
ReactDOM.render(<Router>
<Switch>
<Route exact path="/" component={Content} />
<Route path="/login" component={Auth} />
{/* <Route component={NotFound} /> */}
</Switch>
</Router>, document.getElementById("root"));
ADDED Here is my Auth component which decides what auth form to redirect Login or Register:
export default class Auth extends React.Component {
constructor(props) {
super(props);
this.state = {
isLoginActive: true,
};
this.formChange = this.formChange.bind(this);
}
formChange() {
this.setState({ isLoginActive: !this.state.isLoginActive });
}
render() {
const { isLoginActive } = this.state;
let view = isLoginActive ? (
<Login apiUrl={apiUrl} formChange={this.formChange} history={this.props.history} />
) : (
<Register apiUrl={apiUrl} formChange={this.formChange} history={this.props.history} />
);
return (
<div className="container">
{getCookie("token") == null ? view : <Redirect to="/" />}
</div>
);
}
}
And here is Login component that on successful axios request redirects to "/" path that linked to Content component
export default class Login extends React.Component {
//constructor
login() {
// axios request
this.setState({ userLoggedIn: true });
}
render() {
return this.state.userLoggedIn ? (
<Redirect exact to="/" />
) : (
<div className="base-container">
<button type="button" className="btn" onClick={this.login}>
Login
</button>
</div>
</div>
);
}
}
If I change route here <Redirect exact to="/" />
to any other, e.g.'/home' everything works perfectly. So I just can't redirect to '/' route.