React Router 的No Match文档涵盖了这一点。您需要导入<Switch>组件，然后您可以path完全删除该属性。

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

这是使用的示例：

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

那份工作对我来说是完美的。谢谢。

此方法完美运行，如果 url 不存在或为 false，则允许进行重定向

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

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

例如，如果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>
    )
}

react-router v6

我知道这是 Router v4 的一个问题，但是由于v6出来了，要重定向和导航到我们选择的路由之一，我们可以使用<Navigate>React Router 中的组件。

例子：

<Router>
  <Routes>
    <Route path="users" element={<Users />} />
    <Route path="posts" element={<Posts />} />
  </Routes>
</Router>

现在我们可以在我们的路由配置下面声明空路由的情况，如下所示：

<Router>
  <Routes>
    <Route path="users" element={<Users />} />
    <Route path="posts" element={<Posts />} />
    <Route path="" element={<Navigate to="/users" />} />
  </Routes>
</Router>

现场演示：使用 React Router 重定向默认或 404 路由