React 已匹配父路由的页面内嵌子路由后无法访问问题咨询

• App.js内根路径/的路由配置了exact精确匹配属性，仅当访问路径完全等于/时才会渲染

  return (<Home />)
  

  组件
• 访问/insert1时路径和/不满足精确匹配规则，

  return (<Home />)
  

  组件不会被加载，写在Home组件内部的/insert1路由自然不会生效，最终页面为空。

你可以根据需求选择以下任意一种方案：

方案1：调整App.js路由规则（适合需要保留Home内嵌套路由的场景） #

移除根路由的exact属性，同时将更精确的路由放在Switch靠前的位置（Switch会按从上到下的顺序匹配路由，匹配到就停止），修改后App.js代码如下：

function App() { 
  return (
    <Router>
      <div className="App">
        <Switch>
          <Route exact path="/insert">
            <Form />
          </Route>
          {/* 根路由放在最后，移除exact属性 */}
          <Route path="/">
            <Home />
          </Route> 
        </Switch>
      </div>
    </Router>  );
}

修改后访问/insert1时会先匹配到根路由渲染

return (<Home />)

方案2：将/insert1路由提至App.js平级配置（最简单直接的方案） #

不需要修改现有路由匹配规则，直接把/insert1的路由配置移到App.js的Switch内部，和原有/insert路由平级即可，修改后App.js代码如下：

function App() { 
  return (
    <Router>
      <div className="App">
        <Switch>
          <Route exact path="/">
            <Home />
          </Route> 
          <Route exact path="/insert">
            <Form />
          </Route>
          <Route exact path="/insert1">
            <Form />
          </Route>
        </Switch>
      </div>
    </Router>  );
}

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