Reagieren Router v4 Standardseite (nicht gefundene Seite)

Question

Dies ist ein allgemeiner Zweck, unmatch Anfrage auf nicht gefundene Seite verweisen.

machen dies mit react-router v4 sieht aus wie frühere Versionen und ich erwarte, dass Beispiel funktioniert unten. Links funktionieren gut, aber ich erwarte NotFound-Komponente namens nur unbekannte URL angefordert; aber es ist immer da.

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> 
    ); 
    } 
} 

seine seit path="*" repräsentieren alle Anfragen und notfound Komponente gibt es immer, aber wie kann ich sagen, verstecken diese Komponente für gültige URL-Pfad?

Answer 1

React Router No Match documentation deckt dies ab. Sie müssen die <Switch> Komponente importieren, dann können Sie das path Attribut insgesamt entfernen.

Ein <Switch> rendert das erste Kind <Route>, das übereinstimmt. Ein <Route> ohne Pfad passt immer

Dies ist das Beispiel, das verwendet:

<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> 

Also in Ihrem Fall Sie einfach die path="*" fallen würde und die Einführung der <Switch>:

<Switch> 
    <Route exact path="/" component={Home}/> 
    <Route path="/user" component={User}/> 
    <Route component={Notfound} /> 
</Switch> 

Denken Sie daran, Switch zu Ihrer import Anweisung am Anfang aufzunehmen.

Answer 2

Es ist für mich nicht, arbeiten vor allem ist man mit diesem config

Also, ich habe den Pfad in der Render-Funktion Homepage Komponente zu überprüfen. Etwas wie folgt aus:

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