Question

使用以下路线配置 -

<Router history={hashHistory}>
   <Route name="Home" path="/" component={BaseLayout}>
      <Route name="Gateways" path="/gateways" component={DashboardLayout}>
        <Route name="Login" path="/login" component={Login}/>                      
        <Route name=":id" path="/gateways/:id">
            <IndexRoute name="Dashboard"  component={ViewGateWay}/>                                 
            <Route name="Access Points" path="/accesspoints" component={AccessPoints}>                              
                <Route name=":id" path="/:id" component={ViewAccessPoint}/>
            </Route>
            <Route name="Devices" path="/devices" component={Devices}>                              
                <Route name=":id" path="/:id" component={ViewDevice}/>
            </Route>
        </Route>
        <IndexRoute component={Gateways} />
     </Route>                    
     <IndexRedirect to="Login" />
   </Route>
</Router>

在路径中使用name进行面包屑。有一个侧边菜单，其中包含指向/gateways/:id，/gateways/:id/devices，/gateways/:id/accesspoints的链接，最后两个链接指向使用Link作为/gateways/:id/devices/:id的单个设备和接入点的链接和/gateways/:id/accesspoints/:id。当我在侧边菜单中给出链接时

<Link to="/gateways/${this.props.params.id}/accesspoints">Access Points</Link>

OR

<Link to="/accesspoints">Access Points</Link>

我没有得到正确的页面。设备链接也是如此。我正在尝试使用breadcrumb实现以下API。

home/gateways/GW_ID1/dashboard
home/gateways/GW_ID1/accesspoints
home/gateways/GW_ID1/accesspoints/GW_AP1
home/gateways/GW_ID1/devices
home/gateways/GW_ID1/devices/GW_DV1

Link的正确方法是什么？不使用任何处理程序。

Answer 1

经过一番头脑风暴，想出了一个我想要实现的解决方案

    <Route name=":gid" path="/gateways/:gid">
        <Route name="Dashboard"  path="/gateways/:gid/dashboard"   component={ViewGateWay}/>                                    
        <Route name="Access Points" path="/gateways/:gid/accesspoints"  component={AccessPoints}>                               
            <Route name=":apid" path="/gateways/:gid/accesspoints/:apid" component={ViewAccessPoint}/>
        </Route>
        <Route name="Devices" path="/gateways/:gid/devices"  component={Devices}>                               
               <Route name=":did" path="/gateways/:gid/devices/:did" component={ViewDevice}/>
        </Route>
</Route>

使用react-router添加深层链接

1 个答案: