How to redirect to "/" if path is dynamic in Route React

Question

<Router>
    <Switch>
        <Route
              exact
              path="/path1/"
              component={Page1} //(1)
            />

        {details && details.show_page && (
              <Route
                path={`/${details && details.page_url}`} //path2
                component={Page2}
              />
            )} //(2)
        <Redirect from="*" to="/" />
    </Switch>
</Router>

• I need the user to be redirected to "/" when he enters invalid path (not included in the Router).

• When the user enters "path1" he will be redirected to "path1" just fine (1)

• When the user enters "path2" which is dynamic, he will be redirected to "/" (2)

extra info: I am using Redux to get the value of path2, so I am checking its value inside the Router.(2)

Answer 1

I think you should add this as the last route: <Route><Redirect to="/"/></Route>

<Router>
    <Switch>
        <Route
              exact
              path="/path1/"
              component={Page1} //(1)
            />

        {details && details.show_page && (
              <Route
                path={`/${details && details.page_url}`} //path2
                component={Page2}
              />
            )} //(2)
        <Route><Redirect to="/"/></Route>
    </Switch>
</Router>

Answer 2

Try this... Typically redirects require an if/else condition to work properly.

<Router>
    <Switch>
        <Route
            exact
            path="/path1/"
            component={Page1}
        />

        {details && details.show_page ? (
            <Route
                path={`/${details && details.page_url}/`}
                component={Page2}
            />
        ) : <Redirect from="*" to="/" />
        }
    </Switch>
</Router>