React Router Dom中Switch组件失效，替换后仍无法渲染组件求助

你的问题出在React Router v6的用法上，代码里混用了v5的旧API：

• render属性已被移除：React Router v6中，Route组件不再支持render属性，必须改用element来传递要渲染的内容。
• exact属性无需再用：Routes组件默认会做精确路径匹配，所以exact可以直接删掉。

修正后的代码如下：

return (
  <>
    <Router>
      <Header title="Task" />
      <Routes>
        <Route path="/" element={
          <>
            <AddTodo addTodo={addTodo} />
            <Todos todos={todos} onDelete={onDelete} />
          </>
        } />

        <Route path="/about" element={<About />} />
      </Routes>
      <Footer />
    </Router>
  </>
);

另外可以检查下你的React Router Dom版本，确保是v6（可通过npm list react-router-dom命令查看）。如果是v5版本，应该用Switch而非Routes，同时Route的render属性是有效的，但从你代码里的Routes来看，你大概率用的是v6，按上述方式修改即可恢复正常渲染。

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