react中关于路由嵌套，无法识别路径

Question

页面结构：
RootMap：

            <BrowserRouter history={this.props.history}>
              <Switch>
                    <Route exact path='/' component={Login}/>
                    <Route path='/login' component={Login}/>
                    <Route path='/home' component={Home}/>
                    <Route component={NotFound}/>
              </Switch>
            </BrowserRouter>

Home内结构：

      <BrowserRouter>
        <div>
          <Head/>
          <Aside/>
          <switch>
            <Route exact path='/home' component={Container}/>
            <Route path='/home/dashboards' component={Container}/>
            <Route path='/home/setedge' component={SetEdge}/>
            <Route path='/home/controls' component={Controls}/>
          </switch>
        </div>
      </BrowserRouter>
      

SetEdge内结构：

      <BrowserRouter>
        <Switch>
            <Route exact path='/home/setedge' component={SetIot}/>
            <Route path='/home/setedge/setiot' component={SetIot}/>
            <Route path='/home/setedge/setdevice' component={SetDevice}/>
          </Switch>
      </BrowserRouter>
      
      

页面结构如上，现在我能进入home，再进入home/setedge，但是我现在进如/home/setedge/setdevice时报错？
求解决，或者有没有更好的router结构？

Answer 1

React-router v4 路由配置方法
https://segmentfault.com/a/11...

React-router 4 按需加载的实现方式及原理(Code Splitting)
https://segmentfault.com/a/11...

Answer 2

SetEdge组件不需要再写BrowserRouter和Switch了，我自己试了下，如果这样写我是访问不到的。

<Link to="/home/setedge/setiot">SetIot</Link>
<Route exact path="/home/setedge/setiot" component={SetIot}></Route>

这样写其实就可以了