0
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> is a context provider.

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

when location is in /, the <Redirect> have no effect. changing <Route>to<Route path="/" exact> have no effect in /,either . Please tell me the reason, thank you.

I move the <Container> to the out of <Switch>,thing go to be correct.but why?

BeanBro
  • 51
  • 1
  • 6
  • 1
    What is happening right now? Please provide more details. Also, we may need to see relevant contents of `Container`. If it matches the base path "/" then you will likely never get to your redirect... – segFault Mar 24 '20 at 12:14
  • I guess you need to use `exact` path. Try [this](https://stackoverflow.com/questions/43456656/react-router-v4-routes-not-working) – awran5 Mar 24 '20 at 12:17

1 Answers1

0

Switch will look for exact match, so you need to define the path prop for your route, or else it is never going to match any of the routes.

<Route path="/">
   <Redirect to="/sign-in"></Redirect>
</Route>
Barun Patro
  • 860
  • 4
  • 13