React router dom : <Redirect/> is not working for invalid nested path's like localhost:9090/{invalidaa}/{invalidb}/{invalidc}

问题

I am trying to implement the Notmatch or Invalid routes when the user typed on URI (in browser). Below is my router component .
Below <Redirect/> is working when the URI localhost:9090/{something} it redirect to \ page , but when the URI is invalid like localhost:9090/{invalidyyy}/{invalidxx} not showed anything on the screen . Please help / suggest me to overcome the same .

Update : I render the below component inside App component like

App.js 

render(){
return( <RenderRoutes/> )
}

const renderRoutes = () => {
    
    console.log('isAuthrenderRoute',isAuth);
    return (
        <Router>
            <div>
                <Switch>
                    <Route
                        exact
                        path="/"
                        render={props => (
                            <AppRoute Component={Login} props={props} />
                        )}
                    />    
                        <Route
                            exact={true} path="/xxx/ForgotPassword"
                            render={props => (
                        <LandingPage>
                                <AppRoute  Component={ForgotPassword} props={props} />
                        </LandingPage> 
                            )}
                        />
                    <Redirect exact to="/" />
                </Switch>
            </div>
        </Router>
    );
};

const AppRoute = ({ Component, Layout, props }) => {
    if (Layout) {
        return (
            <Layout {...props}>
                <Component {...props} />
            </Layout>
        );
    }

    if (!Component) {
        return <Layout {...props} />;
    }

    return <Component {...props} />;
};

export default renderRoutes;

回答1:

The Switch component renders the first component that will match the routes conditions. In order for this to work properly, you should only use <Route /> components as children. The reason why the <Redirect /> does work, is because when none of the routes matches, it will fallback to the redirect component because it is not a Route.

You are now rendering the <LandingPage> component as child of the <Switch> component. Which results in that component always being rendered by the Switch. However, the page will be empty because the Route component doesn't match the current location.

Here is your code which should work:

const renderRoutes = () => {
  return (
    <Router>
      <div>
        <Switch>
          <Route
            exact
            path="/"
            render={props => (
              <AppRoute Component={Login} props={props} />
            )}
          />
          {(isAuth !== null || isAuth !== false) && (
            <Route
              exact={true} path="/xxx/ForgotPassword"
              render={props => (
                <LandingPage>
                  <AppRoute Component={ForgotPassword} props={props} />
                </LandingPage>
              )}
            />
          )}
          <Redirect exact to="/" />
        </Switch>
      </div>
    </Router>
  );
};

来源：https://stackoverflow.com/questions/64261462/react-router-dom-redirect-is-not-working-for-invalid-nested-paths-like-loc