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

Question

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

用 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="*" 代表所有请求和未找到的组件总是在那里，但我怎么能说隐藏这个组件以获得有效的 url 路径？

Answer 1

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

<Switch> 呈现第一个匹配的子 <Route>。没有路径的<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>

记得在顶部的import 声明中包含Switch。

Answer 2

它对我不起作用，特别是使用这个config

所以，我必须检查主页组件的渲染功能中的路径。像这样的：

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

Answer 3

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

例如，如果Home 组件有嵌套的路由，例如/home、/dashboard，并且如果访问的 url 是 /db，那么它只会在 Route 部分中显示 NotFound 组件，而不是页面作为一个整体。

为避免这种情况，您可以使用组件和提供者进行非常简单的调整

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

Answer 4

这是我的解决方案，包含两个组件。

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>

这对我来说很完美。谢谢。

Answer 5

此方法效果很好，如果 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>
  );
}

Answer 6

React 路由器 v6

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

例子：

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

现场演示：Redirect Default or 404 Routes with React Router