Reactjs 反应路由器：子组件中定义的路由不工作

我正在使用React路由器开发React web应用程序

主包装器组件上定义的路由对象工作正常，但是如果我尝试在子组件上定义路由，任何指向它的链接都无法呈现所需的组件

下面是一段代码片段，试图解释这种情况：

class MainWrapper extends Component {

render() {
        return (
                <div className="App">
                    <Switch>
                        <Route exact path="/a" component= {A}/>
                    </Switch>

                </div>
        );
    }
}


const A = () => {
   return (
      <div>
         <Route exact path="/b" component={B}/>
         <Link to="/b"/>
      </div>
   ) 
}


const B = () => {
   return (<div>HELLO</div>)
}

类MainWrapper扩展组件{ render（）{ 返回( ); } } 常数A=（）=>{ 返回( ) } 常数B=（）=>{ 返回（你好） } 在我的应用程序中，指向“/b”的链接没有呈现b组件，就像没有传递组件属性一样

---

为什么这样不行？

你有

路由器吗？此外，您还没有关闭
链接
标记
 您在两个路由中都指定了“精确路径”，因此对于渲染B，您的路径应精确为“/B”，但当链接到“/B”时，组件A将卸载，因为对于渲染A，您必须在精确路径“/A”上。你应该改变你的方法。一种方法是删除“精确”链接，并在链接中添加“/a”：

class MainWrapper extends Component {

render() {
    return (
            <div className="App">
                <Switch>
                    <Route path="/a" component= {A}/>
                </Switch>

            </div>
    );
    }
}


const A = () => {
  return (
    <div>
       <Route path="/b" component={B}/>
       <Link to="/a/b"/>
    </div>
  ) 
}


const B = () => {
  return (<div>HELLO</div>)
}

类MainWrapper扩展组件{
render（）{
返回(
);
}
}
常数A=（）=>{
返回(
) 
}
常数B=（）=>{
返回（你好）
}

如果B是a的子级，则url应该是

/a/B

，而不是

/B

，因此您只需要用此代码更新

a

组件

const A = ({match}) => {
  return (
     <div>
        <Route exact path={`${match.url}/b`} component={B}/>
        <Link to=to={`${match.url}/b`}/>
     </div>
  ) 
};

const A=（{match}）=>{
返回(
) 
};

---

请参阅文档

您需要将其包装在

开关中

，并且您应该从

/b

路线中删除

确切的
道具

const A = ({match}) => {
   return (
      <div>
        <Switch>
          <Route path={`${match.url}/b`} component={B}/>
        </Switch>
        <Link to="a/b"/>
      </div>
   ) 
}

const A=（{match}）=>{
返回(
) 
}
是的，我确实在某个地方定义了路由器（在MainWrapper的父组件上）。我将纠正代码段中的输入错误（这不是真正的代码，编译得很好）