csalx123 2019-11-02 12:09 采纳率: 0%
浏览 1537

Antd of React中使用<Redirect from = "/" to="/home"/>出现异常

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

//app.js当输入网址后显示整体布局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布局组件,组件渲染时在Content中渲染Home组件
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>
              <Redirect exact from = "/" to="/home"/>
              <Route path="/home" component={Home} />
              <Route path="/category" component={Category} />
              {/* <Route path='/' component={Home}/>使用此种方式可正常渲染Home组件 */} 
            </Switch>
          </Content>
          <Footer>Footer</Footer>
        </Layout>
      </Layout>
    );
  }
}
//home.jsx Home组件
export default class Home extends Component {
  render() {
    return (
      <div>
        主页
      </div>
    )
  }
}

在整体布局Admin组件中我使用<Redirect exact 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
at main.chunk.js:1

  • 写回答

1条回答

  • dabocaiqq 2019-11-02 12:27
    关注
    评论

报告相同问题?

悬赏问题

  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)
  • ¥20 怎么在stm32门禁成品上增加查询记录功能
  • ¥15 Source insight编写代码后使用CCS5.2版本import之后,代码跳到注释行里面
  • ¥50 NT4.0系统 STOP:0X0000007B
  • ¥15 想问一下stata17中这段代码哪里有问题呀
  • ¥15 flink cdc无法实时同步mysql数据
  • ¥100 有人会搭建GPT-J-6B框架吗?有偿