I have a code:
import React from 'react';
import ReactDOM from 'react-dom';
import Navigation from './Navigation';
import PublicPage from './PublicPage';
import LoginPage from './LoginPage';
import SecuredPage from './SecuredPage';
import {Route, Switch, Redirect, BrowserRouter} from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<Navigation>
<Switch>
<Redirect from='/' to='/public'/>
<Route path="/public" component={PublicPage}/>
<Route path="/login" component={LoginPage}/>
<Route path="/secured" component={SecuredPage}/>
</Switch>
</Navigation>
</BrowserRouter>,
document.getElementById("react-app")
);
Now I want path /
to redirect to /public
path but somehow this configuration doesn't work. Other routes stop rendering as well. I think I do everything like in documentation
Swap
<Redirect from='/' to='/public'/>
with
<Redirect exact from='/' to='/public'/>
because otherwise '/' will match everything, creating an infinite redirect loop
Complementary to rafty answer there is another solution:
ReactDOM.render(
<BrowserRouter>
<Navigation>
<Switch>
<Route exact path="/">
<Redirect from='/' to='/public'/>
</Route>
<Route path="/public" component={PublicPage}/>
<Route path="/login" component={LoginPage}/>
<Route path="/secured" component={SecuredPage}/>
</Switch>
</Navigation>
</BrowserRouter>,
document.getElementById("react-app")
);
but of course its not as clean.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With