组件B

Question

我正在尝试采用react-router 4的理念，即在整个应用程序中传播路由而不是一个中心位置。为简洁起见，＆lt; App ＆gt;在渲染（）：

中有效地吐出以下内容

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

... 到目前为止一直很好：导航链接帮助我路由到相应的组件A和B，我的2页应用程序工作正常。

我遇到的问题是，在componentB中，现在我希望它拥有自己的子路由。虽然这些路线将是<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>
    );
  }
}

当我点击链接C或链接D时，网址会在浏览器栏中更新，但页面上没有任何变化/新组件未呈现。我做错了什么？

Answer 1

好的 - 所以我实现这一点的唯一方法是停止对子组件中的路径进行硬编码，并使用通过react-router传入的路径段。由于这些评价同样的事情（我认为），我不确定为什么这会解决我的问题，但确实如此：

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

这有效!!不明白为什么！如果有人可以解释为什么我会接受他们的答案而不是我的答案。

更新：似乎是绝对与相对网址的情况。使用props.match.path可以避免这种混淆。

React路由器组件无法呈现自己的子节点？

组件B

1 个答案: