React嵌套Router报错：如何多组件共用单个Router解决Link未定义问题

核心原理 #

React Router的Link组件只需要处于同一个根Router的上下文范围内即可正常使用，不需要在每个用到Link的组件外层单独套Router，全应用只需要保留一个最外层的Router即可。你之前删除Navbar内的Router后报Link is not defined是因为你大概率同时删掉了Link的导入语句，和删除Router操作没有关联。

第一步：修改Navbar.js #

• 删掉BrowserRouter as Router的导入语句，仅保留Link的导入
• 删掉组件返回值中包裹nav标签的<Router>和</Router>标签
  修改后的完整Navbar.js代码如下：

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

export default function Navbar(props) {
    return (
        <nav className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>
            <div className="container-fluid">
                <a className="navbar-brand" href="/">{props.title}</a>
                <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                    <span className="navbar-toggler-icon"></span>
                </button>
                <div className="collapse navbar-collapse" id="navbarNav">
                    <ul className="navbar-nav">
                        <li className="nav-item">
                            <Link className="nav-link active" aria-current="page" to="/">Home</Link>
                        </li>
                        <li className="nav-item">
                            <Link className="nav-link" to="/about">About</Link>
                        </li>
                    </ul>
                </div>
            </div>

            <div className={`form-check form-switch text-${props.mode==='light'?'dark':'light'}`}>
                <input className="form-check-input" onClick={props.toggleMode} type="checkbox" role="switch" id="flexSwitchCheckDefault"/>
                <label className ="form-check-label" htmlFor="flexSwitchCheckDefault">Dark Mode</label>
            </div>
        </nav>
    )
}

第二步：修正App.js的Route写法（兼容性优化） #

你当前使用的是React Router v6版本，原有Route的组件渲染写法不符合v6规范，不需要写component属性，直接把组件放在element属性中即可，修改后的Routes部分代码如下：

<Routes>
  <Route path="/About" element={<About/>} />
  <Route path="/" element={<TextForm mode={mode} showAlert={showAlert} heading="Enter Some Text:"/>} />
</Routes>

修改完成后，全应用只有App.js内的一个根Router，Navbar中的Link因为处于根Router的包裹范围内，会正常工作，既不会再报Router嵌套错误，也不会出现Link未定义的报错。

内容的提问来源于stack exchange，提问作者Ali Bin Naseer