Question

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

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

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

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>)
}

在我的应用程序中，指向“ / b”的链接未呈现B组件，就像未传递组件prop一样

为什么这行不通？

Answer 1

您在两个路径中都指定了“精确路径”，因此要渲染B，您的路径应恰好是“ / b”，但是当链接到“ / b”组件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>)
}

Answer 2

如果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>
  ) 
};

请参阅文档here

Answer 3

您在某处有Router吗？另外，您还没有关闭Link标签。

Answer 4

您需要将其包装在Switch中，并且应该从exact路线中移除/b道具。

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

反应路由器：子组件中定义的路由不起作用

4 个答案: