react router v4 default page(not found page)

• Z时代
• 2024-01-10
• 分类：技术分享

This is common purpose, directing unmatch request to notfound page.

making this with react-router v4" title="react-router v4">react-router v4 looks like previous versions and I expect this

sample works below. Links work fine but I expect NotFound component called only unknown url requested; but its always there.

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

its since path="*" represent all request and notfound component always there but how can I say hide this component for valid url path?

Answer

React Router's No Match documentation covers this. You need to import the <Switch> component, then you can remove the path attribute altogether.

A <Switch> renders the first child <Route> that matches. A <Route> with no path always matches

This is the example that uses:

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

So in your case, you'd simply drop the path="*" and introduce the <Switch>:

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

Remember to include Switch to your import statement at the top.

以上是 react router v4 default page(not found page) 的全部内容， 来源链接： utcz.com/a/23878.html