React Routes无法显示根路径("/")页面及通配符("*")页面问题求助

嘿，我一眼就看出问题所在啦！你这是把React Router v5的写法直接套到v6的<Routes>组件上了，这俩版本的路由语法变化还挺大的，难怪页面加载异常。

核心问题解析 #

React Router v6对路由的写法做了不少简化和调整：

• 不再支持component、render这类属性，取而代之的是element属性，而且必须传入JSX元素（比如<Landing />），而不是组件本身；
• v6的路由默认就是精确匹配，所以exact属性已经被彻底移除，写了也不会生效。

修复后的代码 #

把你的App组件改成下面这样，问题应该就能解决了：

export default function App() {
  return (
    <>
      <Header />
      <Routes>
        <Route path="/" element={<Landing />} />
        <Route path="*" element={<PageNotFound />} />
      </Routes>
    </>
  );
}

额外提醒 #

如果你的项目还在使用React Router v5，那应该用<Switch>代替<Routes>，同时保留component和exact属性。不过从你用<Routes>来看，大概率是v6版本，所以上面的修改应该就能让你的Landing页和404页正常显示啦。

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