React路由渲染异常：index.js中组件路由失效报错

错误分析 #

报错提示元素类型无效，得到undefined，核心原因是路由组件导入错误或版本不兼容，大概率是react-router-dom版本问题：

• 若使用v6版本，Switch组件已被移除，直接导入会返回undefined，导致渲染失败；
• 若配合React 18使用旧版render方法，也可能引发类似问题，但此报错更偏向路由组件问题。

解决方案 #

方案1：使用react-router-dom v5 #

先安装v5版本：

npm install react-router-dom@5

你的代码在v5下可正常运行，可优化冗余代码（移除无意义的constructor）：

import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Switch, Route } from 'react-router-dom';

class Simple extends Component {
  state = {}
  render() { 
    return <h1>g</h1>;
  }
}

render(
  <BrowserRouter>
    <Switch>
      <Route path='/' component={Simple}/>
    </Switch>
  </BrowserRouter>,
  document.getElementById('root')
);

方案2：升级到react-router-dom v6 #

v6中Switch替换为Routes，Route的component属性改为element，需传入JSX元素；同时React 18需使用createRoot渲染：

import React, { Component } from 'react';
import { createRoot } from 'react-dom/client';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

class Simple extends Component {
  state = {}
  render() { 
    return <h1>g</h1>;
  }
}

const root = createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <Routes>
      <Route path='/' element={<Simple />}/>
    </Routes>
  </BrowserRouter>
);

若使用React 17及以下，仍可沿用render方法，仅修改路由部分即可：

import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

class Simple extends Component {
  state = {}
  render() { 
    return <h1>g</h1>;
  }
}

render(
  <BrowserRouter>
    <Routes>
      <Route path='/' element={<Simple />}/>
    </Routes>
  </BrowserRouter>,
  document.getElementById('root')
);

内容的提问来源于stack exchange，提问作者Mojtaba Jalili