0
447
Vistasreaccionar página predeterminada del enrutador v4 (página no encontrada)
Este es un propósito común, dirigiendo la solicitud de no coincidencia a la página no encontrada.
hacer esto con react-router v4 se parece a las versiones anteriores y espero que este ejemplo funcione a continuación. Los enlaces funcionan bien, pero espero que el componente NotFound se llame solo una URL desconocida solicitada; pero siempre está ahí.
import { BrowserRouter as Router, Route, Link } from 'react-router-dom' class Layout extends Component { render() { return ( <Router> <div className="App"> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/user">User</Link></li> </ul> <Route exact path="/" component={Home}/> <Route path="/user" component={User}/> <Route path="*" component={Notfound}/> </div> </Router> ); } } 
es porque path="*" representa todas las solicitudes y el componente notfound siempre ahí, pero ¿cómo puedo ocultar este componente para una ruta de URL válida?
3 Respuestas
Responde la pregunta0
La documentación de No Match de React Router cubre esto. Debe importar el componente <Switch> , luego puede eliminar el atributo de path por completo.
Un
<Switch>representa la primera<Route>secundaria que coincide. Una<Route>sin ruta siempre coincide
Este es el ejemplo que utiliza:
<Router> <div> <Switch> <Route path="/" exact component={Home}/> <Redirect from="/old-match" to="/will-match"/> <Route path="/will-match" component={WillMatch}/> <Route component={NoMatch}/> </Switch> </div> </Router> Entonces, en su caso, simplemente soltaría path="*" e introduciría <Switch> :
<Switch> <Route exact path="/" component={Home}/> <Route path="/user" component={User}/> <Route component={Notfound} /> </Switch> Recuerde incluir Switch a su declaración de import en la parte superior.
0
esta es mi solución con dos componentes.
const NotFound = () => <div>Not found</div> const NotFoundRedirect = () => <Redirect to='/not-found' /> //root component <Switch> <Route path='/users' component={UsersPages} /> <Route path='/not-found' component={NotFound} /> <Route component={NotFoundRedirect} /> </Switch> //UsersPages component <Switch> <Route path='/home' component={HomePage} /> <Route path='/profile' component={ProfilePage} /> <Route component={NotFoundRedirect} /> </Switch>Ese trabajo perfecto para mí. Gracias.
0
Este método funciona perfectamente, permite hacer una redirección si la url no existe o si es falsa
function App() { return ( <Router> <Switch> <Route exact path="/" component={Home} /> <Route path="/sorties-scolaires" component={SortiesScolaires} /> <Route path="/voyages-entreprise" component={VoyagesEntreprise} /> <Route path="*"> <Redirect to="/" /> </Route> </Switch> </Router> ); }