React-Router <Switch>, кажется, не имеет никакого эффекта

Question

function App() {
  return (
    <>
      <CssBaseline />
      <Router>
        <Switch> 
          <Route path="/auth">
            <Auth></Auth>
          </Route>
          <Container>
            <Route path="/sign-in" component={SignIn} />
            <Route path="/home" component={Home} />
            <Route path="/load" component={Load} />
          </Container>
          <Route>
            <Redirect to="/sign-in"></Redirect>
          </Route>
        </Switch>
      </Router>
    </>
  );
}

<Container> является поставщиком контекста.

export const Container = ({ children }: { children: JSX.Element[] }) => {
    return <AuthContainer.Provider>
        <DataContainer.Provider>
            {children}
        </DataContainer.Provider>
    </AuthContainer.Provider>
}

, когда location находится в /, <Redirect> не имеет никакого эффекта. изменение <Route> на <Route path="/" exact> также не влияет на /. Пожалуйста, скажите мне причину, спасибо.

Я перемещаю <Container> в <Switch>, вещь go, чтобы быть правильной. Но почему?

Answer 1

Коммутатор будет искать точное совпадение, поэтому вам нужно определить путь для вашего маршрута, иначе он никогда не будет совпадать ни с одним из маршрутов.

<Route path="/">
   <Redirect to="/sign-in"></Redirect>
</Route>