账号密码登录
忘记密码注册账号
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
获取验证码
找回密码返回
邮箱找回 手机找回
获取验证码
注册账号返回
获取验证码
其他登录方式
登录即同意《用户使用协议》和《用户隐私条款》
问答主页 -> 电脑网络
分享
  • 收藏
    X
    react-router v4 怎么让匹配不到子路由的跳转404？
    78
    0

    之前用react-router v3 当设定主路由是/Home的时候，只要不设定参数，/Home/asd 都会匹配不到，跳转到404，但是升级v4以后 /Home主路由，不设定参数，不设定子路由，/Home/asd也会匹配到/Home 如果用严格模式exact,设定了的子路由又匹配不到了?那这下要怎么配置成v3那种模式？

    这是主路由的配置

    <HashRouter >
          <div>
              <Switch>
                  
                  {/* 首页 */}
                  <Route path='/Home' component={Home} /> 
                  {/* 404页面 */}
                  <Route component={NotFound}/> 
                    
              </Switch>
          </div>
</HashRouter>

    这是子路由的配置

    <Switch>
   <Route path='/Home/firstchild' component={HomeChildFirst} /> 
</Switch>

    找到一个曲线救国的方法，子路由底下再加一个404页面的路由

    <Switch>
   <Route path='/Home/firstchild' component={HomeChildFirst} /> 
   <Route component={NotFound}/> 
</Switch>

    但这样的话很麻烦，不能统一。

    还有就是，主路由/Home，不写:prop参数，匹配路由的时候，如果后面有东西比如 /Home/asddd，他会按asddd是参数处理，但是在Home页面拿不到这个参数。

    react router v4

    0
    打赏
    收藏
    点击回答
        全部回答
    • 共 0 条
    • 秋末♂残雪℡ 普通会员 1楼

      在React Router v4中，当匹配不到子路由时，我们可以通过在匹配不到子路由时执行重定向来实现404页面的跳转。以下是一种可能的实现方式：

      1. 首先，确保你已经安装了React Router和相应的依赖项，例如react-router-dom：

      bash npm install react-router-dom

      1. 在你的组件中，定义一个路由对象来表示子路由：

      ```jsx import React from 'react'; import { BrowserRouter as Router, Route, Link } from 'react-router-dom'; import Home from './Home';

      function App() { return (

      ); }

      function Home() { return (

      Welcome to the Home Page

      This is the homepage for the application.

      ); }

      function About() { return (

      About Page

      This is the page for information about the application.

      ); }

      function Contact() { return (

      Contact Page

      This is the page for contact information.

      ); }

      export default App; ```

      1. 在App.js中，我们定义了三个路由，分别对应"Home"、"About"和"Contact"的子路由。在匹配不到子路由时，我们将跳转到"404"页面：

      ```jsx function App() { return (

      404: Page Not Found

      }> Home About Contact       ); }

      export default App; ```

      在这个例子中，当用户访问/404时，React Router会向服务器发送一个请求，请求路径为/404，并在服务器的响应中包含一个404: Page Not Found的页面，然后将页面重定向到Home页面，这样用户就会看到"404: Page Not Found"的页面，而不是"404"页面。

      注意，这只是一个基本的例子，实际应用中你可能需要处理更多的情况，例如路由重定向后重定向到不同的页面，或者在重定向到404页面时包含一些页面的额外内容，例如错误消息或状态码等。

    0 打赏 回复
    更多回答
    网站公告
    扫一扫访问手机版

    回答动态

    • 回到顶部
    • 回到顶部