Question

我想要一个在每条路线上渲染的组件，并且有子组件（例如标题）。

在路线中遗漏exact我可以实现这一点。

render(
    <Router>
      <Route path="/" component={App}/>
    </Router>,
    document.getElementById('app')
);

在组件内部，我有嵌套路由：

const App = ({match}) => (
    <Switch>
      <Route path={`${match.url}login`} component={LoginForm}/>
      <Route path={`${match.url}panel`} component={ControlPanel}/>
    </Switch>
);

根据路径选择要渲染的两个组件中的一个。

如documentation所示，我们需要使用匹配网址。这对我来说非常混乱，因为match.url是/，并盲目地遵循我写的例子，例如'{ $ {match.url} / login }'，结果为//login `

我的问题：如果我不匹配参数，为什么我不能在孩子中使用完整路径？

在App内使用时，以下内容无效：

<Route path="/login" component={LoginForm}/>

Answer 1

我不确定我是否理解正确。我认为您应该使用path代替url。

const App = ({match}) => (
    <Switch>
      <Route path={`${match.path}/login`} component={LoginForm}/>
      <Route path={`${match.path}/panel`} component={ControlPanel}/>
    </Switch>
);

反应路由器v4中的Tricky嵌套match.url

1 个答案: