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

Posted 2023-02-21

【中文标题】反应路由器 v4 默认页面（未找到页面）

【英文标题】：react router v4 default page(not found page)

【发布时间】：2017-08-13 06:11:55

【问题描述】：

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

用 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 路径？

【参考方案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。

【讨论】：

像魅力一样工作，谢谢！ iǘe 刚刚发现了一篇很棒且有用的帖子，仅用于添加有关 react-routes v4 的更多信息 - medium.com/@pshrmn/…

那么如何为我的 404 选择位置路径呢？

【参考方案2】：

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

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

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

【讨论】：

OP 询问的路由未找到或可能是格式错误的 url，而不是根 url。

【参考方案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>
    )

【参考方案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>

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

【讨论】：

404位置路径怎么改写

很简单，只要你在最后有一个开关，放一个 并且你总是去有一个 404 重定向。谢谢

【参考方案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>
  );

【参考方案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