Tras una solicitud de URL incorrecta, la estoy redirigiendo al componente PageNotFound. A continuación se muestra el código.
let routes = ( <Switch> <React.Fragment> <Route path='/learning' exact component={Learning} /> <Route path='/login' component={Login} /> <Route path='/home' component={Login} /> <Route path='/about' component={Login} /> <Route path='/profile' component={Login} /> <Route path='/' exact component={Login} /> <Route component={PageNotFound} /> </React.Fragment> </Switch> ); <BrowserRouter> <Suspense fallback={<PuffLoader color={'#000000'} size={150} css={override} loading={true} />}> <ThemeProvider theme={theme}> <CssBaseline /> {routes} </ThemeProvider> </Suspense> </BrowserRouter>Pero cuando redirijo a la página de inicio de sesión, se están procesando dos componentes. un componente-> (Componente de inicio de sesión) segundo componente-> (Componente PageNotFound)
Cualquier idea de cómo representar solo un componente al aterrizar en la página de inicio de sesión y cualquier solicitud de URL incorrecta. Quiero redirigirlo al componente PageNotFound. Actualmente estoy usando las siguientes versiones-->
"react-redux": "^7.2.1", "react-router": "5.1.2", "react-router-dom": "5.1.2", "react": "^16.13.1", "react-dom": "^16.13.1"De acuerdo con los documentos v5.reactrouter
¿En qué se diferencia esto de simplemente usar un montón de
<Route>s?
<Switch>es único en el sentido de que representa una ruta exclusivamente. Por el contrario, cada<Route>que coincida con la ubicación se representa de forma inclusiva.
Entonces, elimine el fragment rodea su <Route> , funcionaría
import { Route, Switch } from "react-router"; let routes = ( <Switch> <Route exact path="/"> <Home /> </Route> <Route path="/login"> <Login /> </Route> <Route> <PageNotFound /> </Route> </Switch> );Solucioné este problema eliminando <React.Fragment> y también agregando un código adicional para redirigir.
let routes = ( <Switch> <Route path='/learning' component={Learning} /> <Route path='/login' component={Login} /> <Route path='/home' component={Login} /> <Route path='/about' component={Login} /> <Route path='/profile' component={Login} /> <Redirect from='/' to='/login' exact /> <Route path='*' component={PageNotFound} /> </Switch> );