reactjs - source - react router switch

reaccionar página predeterminada del router v4(página no encontrada)

Question

Este es un propósito común, dirigir la solicitud no coincidente 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 llamado solo se solicite una URL desconocida; 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 como path="*" representa todas las solicitudes y el componente no encontrado siempre allí, pero ¿cómo puedo decir que oculte este componente para una ruta URL válida?

Answer 1

Aunque la solución de aceptación proporciona la respuesta, no funcionaría cuando haya anidado rutas

Por ejemplo, si el componente Home tiene rutas anidadas como /home , /dashboard y si la url visitada es /db , mostraría un componente NotFound solo dentro de la sección Ruta, pero no la página en su conjunto.

Para evitar esto, puede seguir con un simple ajuste del uso de un componente y un proveedor

const NoMatch = (props) => (
    <Redirect to={{state: {noMatch: true}}} />
)

const ProviderHOC = (NotFoundRoute) => {
    const RouteProvider = (props) => {
        if(props.location && props.location.state && props.location.noMatch) {
           return  <NotFoundRoute {...props} />
        }
        return props.children;
    }
    return withRouter(RouteProvider)

}

export default ProviderHOC;

Y luego puedes usarlo como

const RouteManager  = ProviderHOC(NotFoundComponent);

<Router>
  <RouteManager>
    <Switch>
      <Route path="/" exact component={Home}/>
      <Redirect from="/old-match" to="/will-match"/>
      <Route path="/will-match" component={WillMatch}/>
      <NoMatch />
    </Switch>
  </RouteManager>
</Router>

y dentro del componente Home

render() {
    return (
         <Switch>
               <Route path="/home" component={NewHome} />
               <Route path="/dashboard" component={Dashboard} />
               <NoMatch />
         </Switch>
    )
}

Answer 2

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 mi. Gracias.

Answer 3

La documentación de React No Router cubre esto. Debe importar el componente <Switch> , luego puede eliminar el atributo de path completo.

Un <Switch> representa el primer elemento secundario <Route> que coincide. Un <Route> sin ruta siempre coincide

Este es el ejemplo que usa:

<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 suelte la path="*" e introduzca el <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.

Answer 4

No me funciona, particularmente uno está usando esta config

Entonces, tengo que verificar la ruta en la función de representación del componente de la página de inicio. Algo como esto:

render(){
const {match, location, history} = this.props;
if (location.pathname === ''/''){
return (<div>Home</div>)
}else{
return null
}
}