React Router：子组件中定义的路由不起作用答案

【问题标题】：React Router: Route defined in child component not workingReact Router：子组件中定义的路由不起作用
【发布时间】：2019-02-06 19:52:42
【问题描述】：

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

在主包装组件上定义的 Route 对象工作得很好，但是如果我尝试在子组件上定义一个 Route，任何指向它的链接都将无法呈现所需的组件。

这是一个代码 sn-p 试图解释这种情况：

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 一样

为什么这不起作用？

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

您在两个路由中都指定了“确切路径”，因此对于渲染 B，您的路径应该是完全“/b”，但是当链接到“/b”时，组件 A 将卸载，因为对于渲染 A，您必须在确切路径上“/一种”。你应该改变你的方法。一种是删除“exact”并在您的链接中包含“/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>)
}

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

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

【讨论】：

是的，我确实在某处定义了一个路由器（在 MainWrapper 的父组件上）。我会更正 sn-p 中的错字（这不是真正的代码，编译得很好）

【解决方案4】：

您需要将其包装在 Switch 中，并且应该从您的 /b 路由中删除 exact 属性。

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

【讨论】：