React 路由器组件无法渲染自己的子组件？

Question

我正在尝试接受 react-router 4 的理念，即让路由分布在整个应用程序而不是一个中心位置。为简洁起见，<App> 在其 render() 中有效地输出了以下内容：

<BrowserRouter>
    <Link to='/' />
    <Link to='/linkb' />
    <Switch>
        <Route exact path='/' component={ComponentA}>
        <Route exact path='/linkb' component={ComponentB>
    </Switch>
</BrowserRouter>

... 到目前为止一切顺利：导航 links 帮助我路由到相应的组件 A 和 B，我的 2 页应用程序工作正常。

我遇到的问题是，在 componentB 内部，现在我希望它有自己的子路由。尽管这些路线将是 'grandchildren' of <App/>，但我认为 <App/> 没有理由知道或关心它们。我构建了这个（为了清楚起见，周围的内容和 css 大部分内容都被撕掉了）：

组件 B

import React, { Component } from "react";
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';
import ComponentC from './ComponentC';
import ComponentD from './ComponentD';

export default class ComponentB extends Component {
  constructor(props) { super(props);}
  render() {
    return (
      <div>
        <div>
          <Link to='/linkb/c' className='btn'>link C</Link>
          <Link to='/linkb/d' className='btn'>link D</Link>
        </div>
        {this.props.children}
        <Switch>
          <Route exact path="linkb/c" component={ComponentC}/>
          <Route exact path="linkb/d" component={ComponentD}/>
        </Switch>
      </div>
    );
  }
}

当我单击 link C 或 link D 时，浏览器栏中的 url 更新但页面上没有任何变化/新组件未呈现。我做错了什么？

Answer 1

好的 - 所以我让它工作的唯一方法是停止对我的子组件中的路径进行硬编码，并使用通过 react-router 传入的路径段。由于这些评估结果相同（我认为），我不确定为什么这能解决我的问题，但确实如此：

      <Link to={`${this.props.match.path}/c`}>link c </Link>
      <Link to={`${this.props.match.path}/d`}>link d </Link>

那行得通！！不知道为什么！如果有人能解释为什么我会接受他们的回答而不是我的。

update：似乎是绝对 url 与相对 url 的情况。使用 props.match.path 避免这种混淆。

React 路由器组件无法渲染自己的子组件？

React router component can't render its own children?

reactjs

react-router-v4

组件 B