React Router如何根据URL切换渲染页面组件并实现按钮跳转

• 重复嵌套路由容器：RouteFile.js外层已经通过BrowserRouter挂载了全局路由上下文，App.js内部又单独引入BrowserRouter嵌套了一层独立的路由实例，两层路由上下文完全隔离，导致Link触发的地址变化无法被外层Switch捕获，出现点击链接无页面切换的问题。
• 根路由匹配规则缺失：/路径的路由没有加精准匹配规则，受Switch“匹配到第一个前缀符合的路由即停止渲染”的逻辑影响，访问/create、/open等任何子路径时，都会优先命中/开头的路由直接渲染App组件，其他页面永远无法正常展示。
• 路由配置缺失：代码内的Link跳转包含/open、/explore两个路径，但路由表中没有对应配置的Route项，点击这两个链接时会出现路由匹配异常。
• 文件命名拼写错误：原代码将RouteFile写为RoutFile，和导入路径不匹配会触发模块找不到的报错。

1. 移除App.js中多余的路由逻辑：App组件作为被路由渲染的页面组件，只需要负责内部Link链接的渲染，不需要单独包裹路由容器，修正后的核心代码如下：

   import './App.css';
   import { Link } from "react-router-dom";
   
   function App() {
     return (
       <div className="App background">
           <div className="container">
             <li>
               <Link className="button a" to="/create">
                 <div className="button-container">
                   <div className="icon new"></div>
                   <div className="text new-text">Create</div>
                 </div>
               </Link>
             </li>
             <li>
               <Link className="button a" to="/open">Open</Link>
             </li>
             <li>
               <Link className="button a" to="/explore">Explore</Link>
             </li>
           </div>
       </div>
     );
   }
   
   export default App;
   

2. 调整RouteFile.js的路由配置：
   • 全局只保留唯一的BrowserRouter实例，作为所有路由逻辑的上下文载体
   • 给根路径路由增加精准匹配规则（react-router-dom v5使用exact属性，v6对应使用end属性），避免拦截其他子路径的匹配
   • 补全所有Link涉及路径的对应Route配置
     修正后的核心代码如下（适配v5版本Switch、Route API）：

   import {
       BrowserRouter as Router,
       Switch,
       Route
   } from "react-router-dom";
   import App from './App';
   import Create from './Create';
   // 按需导入其他跳转路径对应的页面组件
   // import Open from './Open';
   // import Explore from './Explore';
   
   function RouteFile() {
       return (
           <Router>
               <Switch>
                   {/* 精准匹配根路径，不拦截子路径 */}
                   <Route exact path="/" component={App}/>
                   <Route path="/create" component={Create}/>
                   {/* 取消注释即可启用其他路径的路由匹配 */}
                   {/* <Route path="/open" component={Open}/>
                   <Route path="/explore" component={Explore}/> */}
               </Switch>
           </Router>
       );
   }
   export default RouteFile;
   

3. 统一文件命名和导入路径：将误写的RoutFile.js文件名修正为和导入路径一致的RouteFile.js，消除模块导入报错。

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