V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
17681880207
V2EX  ›  程序员

react-router-dom 和 react-router-config 的问题

  •  
  •   17681880207 · 2021-08-27 11:25:58 +08:00 · 1599 次点击
    这是一个创建于 944 天前的主题,其中的信息可能已经有所发展或是发生改变。

    各位老哥,今天第一次自己尝试搭建使用 React 就碰壁了,求帮忙。 我想用 react-router-dom 和 react-router-config 搭建路由的,但是失败了。

    // index.tsx
    import React from 'react'
    import ReactDOM from 'react-dom'
    import './index.css'
    import App from './App'
    
    ReactDOM.render(
      <React.StrictMode>
        <App/>
      </React.StrictMode>,
      document.getElementById('root')
    )
    
    // App.tsx
    import React from 'react'
    import {BrowserRouter as Router} from 'react-router-dom'
    import {renderRoutes} from 'react-router-config'
    import routes from './routes'
    
    function App() {
      return (
        <Router>
          {renderRoutes(routes)}
        </Router>
      )
    }
    
    export default App
    
    
    // routes/index.ts
    import Login from '../pages/Login'
    import Homepage from '../pages/Homepage'
    
    const routes = [
      {
        path: '/',
        component: Homepage
      },
      {
        path: '/login',
        component: Login
      }
    ]
    
    export default routes
    
    

    运行后,页面报错如下:

    Error: Invariant failed: You should not use <Switch> outside a <Router>
    

    但是我没有是使用 Switch 啊

    // packages.json 如下
    {
      "name": "my-react-app-ts",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@testing-library/jest-dom": "^5.11.4",
        "@testing-library/react": "^11.1.0",
        "@testing-library/user-event": "^12.1.10",
        "@types/jest": "^26.0.15",
        "@types/node": "^12.0.0",
        "@types/react": "^17.0.0",
        "@types/react-dom": "^17.0.0",
        "@types/react-router": "^5.1.16",
        "@types/react-router-config": "^5.0.3",
        "@types/react-router-dom": "^5.1.8",
        "react": "^17.0.2",
        "react-dom": "^17.0.2",
        "react-router": "^5.2.0",
        "react-router-config": "^5.1.1",
        "react-router-dom": "^5.2.0",
        "react-scripts": "4.0.3",
        "typescript": "^4.1.2",
        "web-vitals": "^1.0.1"
      },
      "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
      "eslintConfig": {
        "extends": [
          "react-app",
          "react-app/jest"
        ]
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      },
      "devDependencies": {}
    }
    
    
    
    7 条回复    2021-08-30 10:16:41 +08:00
    XTTX
        1
    XTTX  
       2021-08-27 11:38:23 +08:00
    wiluxy
        2
    wiluxy  
       2021-08-27 12:23:33 +08:00
    啊这,react-router-config 这点东西。。自己写个 renderRoutes 函数 map 一下就完事了
    kenanyah
        3
    kenanyah  
       2021-08-27 13:40:30 +08:00
    renderRoutes 是会创建 <Switch>的 , 所以有这个报错
    你把 <Router>{renderRoutes(routes)}</Router> 外层 Router 去掉试试
    17681880207
        4
    17681880207  
    OP
       2021-08-27 13:55:05 +08:00
    @kenanyah
    试了一下去掉,还是报一样的错误。我看了官方的文档内,也是这么使用的 /(ㄒoㄒ)/~~
    YadongZhang
        5
    YadongZhang  
       2021-08-27 15:41:51 +08:00
    YadongZhang
        6
    YadongZhang  
       2021-08-27 15:46:46 +08:00
    17681880207
        7
    17681880207  
    OP
       2021-08-30 10:16:41 +08:00   ❤️ 1
    @YadongZhang
    非常感谢!后后台修改了源和尝试使用了 yarn 来进行安装,发现一切正常了。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   943 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 20:50 · PVG 04:50 · LAX 13:50 · JFK 16:50
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.