React路由中Footer组件报错问题求助

问题场景 #

我正在学习React，编写了基础路由示例，但浏览器抛出错误。

App组件代码 #

import About from './About';
import Home from './Home';
import { BrowserRouter as Router ,Routes, Route} from "react-router-dom";
import Footer from './Footer';

const App = () => 
    <Router>
        <Routes>
          
                    <Route path="/" exact element={<Home></Home>}></Route>
                    <Route path="/about" element={<About></About>}></Route>
                    <Footer></Footer>
          
        </Routes>
    </Router>


export default App

Footer组件代码 #

import {Link} from 'react-router-dom'


const Footer = () => <footer>

    <nav>
        <ul>
            <li>
                <Link to="/">Home</Link>
            </li>
            <li>
                <Link to="/about">About</Link>
            </li>
        </ul>
    </nav>

</footer> 

export default Footer

报错信息 #

Uncaught Error: [Footer] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

尝试用Fragment包裹Routes内的组件后错误依旧：

<Router>
    <Routes>
            <Fragment>
                <Route path="/" exact element={<Home></Home>}></Route>
                <Route path="/about" element={<About></About>}></Route>
                {/* <Home></Home>
                <About></About> */}   
                <Footer></Footer>
            </Fragment>
    </Routes>
</Router>

问题原因 #

Routes组件的核心作用是根据路径匹配渲染对应路由，它的直接子元素只能是Route或React.Fragment。即使嵌套Fragment，Fragment内部的非Route组件（比如这里的Footer）依然会被判定为无效子元素——因为Routes只会识别其直接层级的Route节点。另外，Footer属于全局布局组件，本就不应该放在路由匹配容器Routes内部。

解决方法 #

将Footer移出Routes组件，放到Router内部、Routes之外，这样它会在所有路由页面中全局渲染，同时符合路由组件的规则：

修改后的App组件代码 #

import About from './About';
import Home from './Home';
import { BrowserRouter as Router ,Routes, Route} from "react-router-dom";
import Footer from './Footer';

const App = () => 
    <Router>
        <Routes>
            <Route path="/" element={<Home />}></Route>
            <Route path="/about" element={<About />}></Route>
        </Routes>
        {/* Footer放在Routes外部，Router内部，实现全局渲染 */}
        <Footer />
    </Router>

export default App

补充：React Router v6中已移除exact属性，默认路由匹配即为精确匹配，因此可以删掉path="/"上的exact。

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