Answer the question
In order to leave comments, you need to log in
How to redirect from home route to nested React-router 4?
I can't figure out how to properly configure React-router 4 to redirect logged in users from the home page "/" to the attachment "/user" which has its own router
Here is my root router
import {
BrowserRouter as Router, Route, Switch, Redirect,
} from 'react-router-dom'
const logonUser = () => !!JSON.parse(localStorage.getItem(process.env.REACT_APP_LOCAL_STORAGE))
const App = ({ firebase }) => {
useEffect(() => firebase.onAuthUserListener(... ))
const authorized = useCallback(() => logonUser(), [])
return (
<Router>
<Grid container justify="center" alignItems="center">
{/* It's a bag cannot redirect from the landing page cause non stop redirection to /user
<MyRedirectRoute path={ROUTES.LANDING} authorized={!authorized} component={LandingPage} />
*/}
<Switch>
// Рутовый роутер не получается сделать защищенным, возникает ошибка
// You tried to redirect to the same route you're currently on: "/user/" и компонент не рендерится
<Route exact path={ROUTES.LANDING} component={LandingPage} />
<MyRedirectRoute path={ROUTES.GET_STARTED} authorized={!authorized} component={GetStartedPage} />
// MyRedirect это
// <Route exact {...rest} render={props => (authorized() ? ( <Redirect to={{ pathname: ROUTES.USER }} /> ) : ( <Component {...props} /> )) } />
<MyRedirectRoute path={ROUTES.USER} authorized={authorized} component={UserRouterPage} />
<Route component={() => 'NoMatch'} />
</Switch>
</Grid>
</Router>
)
}
const UserRouter = ({ match: { path } }) => (
<Router>
<Route exact path={`${path}`} component={LanguagePage} />
<Route exact path={`${path}${ROUTES.LESSON}`} component={Lesson} />
</Router>
)
Answer the question
In order to leave comments, you need to log in
Everything turned out to be simple. in UserRouter no need to wrap again in Router and everything works
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question