react-router-dom v6 中‘Switch‘ is not exported from ‘react-router-dom‘

最新推荐文章于 2024-08-05 09:48:06 发布

九州县令

最新推荐文章于 2024-08-05 09:48:06 发布

阅读量688

点赞数 1

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/weixin_48201140/article/details/125172494

版权

react 专栏收录该内容

1 篇文章 1 订阅

订阅专栏

这篇博客详细介绍了在React应用中从react-router-dom v5迁移到v6的过程，主要变化包括Routes组件替代了Switch，Route组件的使用方式也有所改变，特别是引入了`element`属性来指定组件。通过这个指南，开发者可以更好地理解和适应新版本的API调整。

摘要由CSDN通过智能技术生成

首先出现这个问题是因为react-router-dom v6版本做了改动，它用 Routes 组件替换了 Switch。

react-router-dom v5 版本

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import routes from './routers';

export default class RouterConfig extends React.Component {
    render () {
        return (
            <Router>
                <Switch>
                    {routes.map((route, index) => {
                        return <Route key={index} {...route}></Route>
                    })}
                </Switch>
            </Router>
        );
    }
}

react-router-dom v6 版本

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import routes from './routers';

export default class RouterConfig extends React.Component {
    render () {
        return (
            <Router>
                <Routes>
                    {routes.map((route, index) => {
                        return <Route key={index}
                                      exact
                                      path={route.path}
                                      element={<route.component />}></Route>
                    })}
                </Routes>
            </Router>
        );
    }
}