React-router-dom点击Link更新URL但不渲染组件问题求助

• 核心错误是MainRoute.js中错误将路由声明标签<Route>写为了<Router>，并且在已经有外层路由实例的情况下错误嵌套了路由实例：
  1. 你已经在App.js最外层使用BrowserRouter声明了整个应用唯一的路由根实例，正常情况下一个React应用只需要一个Router实例即可。
  2. MainRoute.js中声明根路径、/products路径时误用<Router>标签，相当于嵌套了独立的路由实例，外层Link触发的URL变更只会更新外层路由的状态，内层嵌套的路由实例无法感知到状态变化，因此不会触发组件渲染。只有手动刷新页面时，内层路由实例重新初始化读取当前URL，才会匹配渲染对应组件。

按照以下两步修改MainRoute.js代码即可：

1. 修改导入语句，删除不需要的Router导入：

// 原导入语句
// import { BrowserRouter as Router, Switch, Route,Redirect } from "react-router-dom";
// 修改为
import { Switch, Route, Redirect } from "react-router-dom";

2. 将<Switch>标签内两个误用的<Router>标签改为<Route>：

<Switch>
  {/* 原错误写法 <Router  exact path="/" component={() => <Redirect to="/products" />}></Router> */}
  <Route exact path="/">
    <Redirect to="/products" />
  </Route>
  {/* 原错误写法 <Router  exact path="/products"> */}
  <Route exact path="/products">
    <Banner/>
    <Products/>   
  </Route>
  {/* 其余原有Route代码保持不变 */}
</Switch>

修改完成后点击Link即可正常触发目标组件渲染，无需手动刷新。

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