我是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>不能嵌套吗?
在Ant Design of React中,如果你在Switch嵌套后使用Redirect from = “/” to=“/home”,可能会出现以下异常:
解决这个问题的方法是在Switch内部使用from属性。例如:
```jsx
const switchCase = (value) => {
switch (value) {
case 'home':
return
const App = () => {
return (
export default App; ```
在这个例子中,我们在Switch内部定义了一个case,当value等于'home'时,会执行Redirect的from属性,将值设置为"/home"。然后在App组件中,我们使用Switch的value属性来控制显示的内容。