反应路由器v4默认页面（未找到页面）

这是常见的目的，将不匹配的请求定向到未找到的页面。

使用react-router v4进行此操作看起来像以前的版本，我希望此示例在下面工作。链接可以正常工作，但我希望请求的NotFound组件仅请求未知的url；但它总是在那里。

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

它既然path="*"代表了所有请求和notfound组件，总是存在在那里，但是我怎么能说为有效的URL路径隐藏这个组件呢？

React Router的No Match文档对此进行了介绍。您需要导入<Switch>组件，然后可以path完全删除该属性。

A<Switch>呈现<Route>匹配的第一个孩子。<Route>没有路径的A总是匹配

这是使用以下示例：

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

因此，在您的情况下，您只需删除path="*"并引入<Switch>：

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

请记住，在顶部Switch的import声明中也要包括在内。

这是我的解决方案，包含两个部分。

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>

这项工作对我来说很完美。谢谢。

尽管accept解决方案确实提供了答案，但是当您嵌套Routes时它不起作用

例如，如果Home组件具有嵌套的Routes之类/home，/dashboard并且访问的url为/db，则它将显示一个NotFound仅在Route部分中组件，而不在整个页面中显示。

为了避免这种情况，您可以通过使用组件和提供程序的非常简单的调整来进行

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;

然后你可以像这样使用它

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>

在Home组件内

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

此方法效果很好，如果网址不存在或为假，则可以进行重定向

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

它对我不起作用，特别是有人正在使用此配置

因此，我必须检查Homepage组件的render函数中的路径。像这样：

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