账号密码登录
微信安全登录
微信扫描二维码登录

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

手机验证码登录
找回密码返回
邮箱找回手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    Antdesign of React中Switch嵌套后使用Redirect from = “/” to=“/home”出现异常
    28
    0

    我是react新手,最近在学习Antdesign of react。想实现一个当用户输入网址后,利用React的<Redirect>标签自动跳转到首页的功能。但是在组件内部同时使用<Switch><Redirect exact from = "/" to="/home"/>出现异常,请各位大神帮帮忙,看看问题出现在哪里。源码如下(使用的脚手架:create-react-app和antd):

    //app.js 当输入网址后显示整体布局Admin组件
    import React, { Component } from "react";
    import { BrowserRouter, Route, Switch } from "react-router-dom";
    import Login from "./pages/login/Login";
    import Admin from "./pages/admin/Admin";
    
    export default class App extends Component {
      render () {
        return (
          <BrowserRouter>
            <Switch> {/*只匹配其中一个*/}
              <Route path='/login' component={Login}></Route>
              <Route path='/' component={Admin}></Route>
            </Switch>
          </BrowserRouter>
        )
      }
    }
    
    //Admin.jsx Antd布局组件。布局组件渲染时想在其Content组件中渲染Home组件
    import React, { Component } from "react";
    import { Redirect, Switch, Route } from "react-router-dom";
    import { Layout } from "antd";
    import LeftNav from "../../components/LeftNav";
    import Header from "../../components/Header";
    import Home from "../home/Home";
    import Category from "../category/Category";
    
    const { Footer, Sider, Content } = Layout;
    export default class Admin extends Component {
      render() {
        return (
          <Layout style={{ minHeight: "100%" }}>
            <Sider>
              <LeftNav />
            </Sider>
            <Layout>
              <Header>Header</Header>
              <Content style={{margin: 20, backgroundColor: '#fff'}}>
                <Switch>                  
                  <Route path="/home" component={Home} />
                  <Route path="/category" component={Category} />
                  {/* 用户访问根路径或其它非路由路径跳转到home*/} 
                  <Redirect from = "/" to="/home"/>                  
                </Switch>
              </Content>
              <Footer>Footer</Footer>
            </Layout>
          </Layout>
        );
      }
    }
    //home.jsx Home组件
    import React, { Component } from 'react'
    export default class Home extends Component {
      render() {
        return (
          <div>
            主页
          </div>
        )
      }
    }
    

    在整体布局Admin组件中我使用 <Redirect from = "/" to="/home"/>使Home组件显示在Layout的Content中,但出现如下异常:

    TypeError: path_to_regexp__WEBPACK_IMPORTED_MODULE_8___default.a.compile is not a function
    at compilePath (react-router.js:235)
    at generatePath (react-router.js:258)
    at react-router.js:277
    at updateContextConsumer (react-dom.development.js:19811)
    at beginWork$1 (react-dom.development.js:20186)
    at HTMLUnknownElement.callCallback (react-dom.development.js:337)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
    at invokeGuardedCallback (react-dom.development.js:439)
    at beginWork$$1 (react-dom.development.js:25723)
    at performUnitOfWork (react-dom.development.js:24649)
    at workLoopSync (react-dom.development.js:24622)
    at performSyncWorkOnRoot (react-dom.development.js:24211)
    at scheduleUpdateOnFiber (react-dom.development.js:23638)
    at updateContainer (react-dom.development.js:27047)
    at react-dom.development.js:27464
    at unbatchedUpdates (react-dom.development.js:24376)
    at legacyRenderSubtreeIntoContainer (react-dom.development.js:27463)
    at Object.render (react-dom.development.js:27548)
    at Module../src/index.js (index.js:8)
    at __webpack_require__ (bootstrap:785)
    at fn (bootstrap:150)
    at Object.0 (main.chunk.js:1581)
    at __webpack_require__ (bootstrap:785)
    at checkDeferredModules (bootstrap:45)
    at Array.webpackJsonpCallback [as push] (bootstrap:32)
    at main.chunk.js:1

    删除Admin.jsx中的<Switch>后异常消失,网页显示正常,难道React的<Switch>不能嵌套吗?

    1
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 11 元积分
        全部回答
    • 0
    • 星降临 普通会员 1楼

      在Ant Design of React中,如果你在Switch嵌套后使用Redirect from = “/” to=“/home”,可能会出现以下异常:

      1. Uncaught TypeError: Cannot read property 'from' of undefined 这是因为在Switch内部,如果from属性为undefined,那么在Redirect内使用from属性也会导致错误。

      解决这个问题的方法是在Switch内部使用from属性。例如:

      ```jsx const switchCase = (value) => { switch (value) { case 'home': return default: return

      Unknown value
      ; } };

      const App = () => { return (

      Welcome to Home
      {/ other cases /} ); };

      export default App; ```

      在这个例子中,我们在Switch内部定义了一个case,当value等于'home'时,会执行Redirect的from属性,将值设置为"/home"。然后在App组件中,我们使用Switch的value属性来控制显示的内容。

    更多回答
    扫一扫访问手机版