react-router-dom <Routes>组件在localhost:3000无内容渲染问题求助

问题原因 #

你使用的是react-router-dom v6版本，API和旧版v5差异很大，你写的代码混用了旧版语法，导致路由匹配失败：

• v6 移除了Route组件的component属性，替换为element属性传入组件实例
• v6 嵌套路由要求父路由组件必须渲染<Outlet />作为子路由内容的挂载出口，否则子路由内容无法显示
• v6 默认开启路由精确匹配，不需要额外加exact属性
• 你的/register、/login路由嵌套在/路由下，若不需要在Landing组件内展示登录注册内容，不需要做嵌套配置

解决方案 #

方案1：平级路由（绝大多数场景需求，三个页面独立展示）

直接把三个路由平级放在Routes下即可：

import { Router, Routes, Route } from 'react-router-dom'
class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <NavBar />

          <Routes>
            <Route path="/" element={<Landing />} />
            <Route path="/register" element={<Register />} />
            <Route path="/login" element={<Login />} />
          </Routes>
        </div>
      </Router>
    );
  }
}

方案2：保留嵌套路由（需要在Landing组件内部展示登录注册内容）

首先修改Landing组件，在需要展示子路由内容的位置加入<Outlet />：

// Landing组件代码示例
import { Outlet } from 'react-router-dom'
class Landing extends Component {
  render() {
    return (
      <div>
        {/* 原有Landing组件的内容 */}
        <div className="sub-page-content">
          {/* 子路由内容会渲染在这里 */}
          <Outlet />
        </div>
      </div>
    )
  }
}

再修改App组件的路由配置：

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <NavBar />

          <Routes>
            <Route path="/" element={<Landing />}>
              {/* 子路由path不需要加前缀，v6会自动拼接父路由path */}
              <Route path="register" element={<Register />} />
              <Route path="login" element={<Login />} />
            </Route>
          </Routes>
        </div>
      </Router>
    );
  }
}

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