javascript - 如何重定向顶级路由而不是子路由？

Question

如果未经授权，我需要将用户重定向到身份验证页面。重定向工作正常。

所以问题是如何将所有内容重定向到一个页面，但不重定向该页面的子页面？

例如，我需要将用户重定向到“/auth”，然后他们可以在里面转到“/auth/signin”或“/auth/signup”。

这是我的代码，它总是重定向到'/ auth'

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Redirect
} from "react-router-dom";
import {useRouteMatch} from 'react-router-dom';

const AuthView = () => {
     const {path} = useRouteMatch();
     return (
       <Switch>
          <Route path={`${path}/signup`}>
             <SignUp/>
          </Route>
          <Route path={`${path}/signin`}>
             <SignIn/>
          </Route>
          <Route path={`${path}/signout`}>
             <SignOut/>
          </Route>
       </Switch>
     );
}
const App = () => {
   return (
      <Router>
         <Switch>
            <Route path="/auth">
               <AuthView/>
            </Route>
            <Redirect from="*" to="/auth"/>
         </Switch>
      </Router>
   );
}

更新：我用这个拐杖解决了它，但我不确定，这是解决它的正确方法吗？

<Route render={(params) => { 
    if(params.location.pathname.match(/(\/auth)/)) {
       return;
    }
    return <Redirect to="/auth/signin/"/>
}}>