React-Router-4从另一个组件路由

所以通常它会像做以下

<NavLink to="/link">link</NavLink> 
<NavLink to="/anotherLink">link </NavLink> 
<Switch> 
    <Route exact path="/link" component={linkComponent}/> 
    <Route path="/anotherLink" component={anotherLinkComponent}/> 
</Switch>

，但有可能有NavLink的一个组件，它在主成分然后从主分量的路径装？因此，在一个组件中有NavLink，在主要组件中有Route。

的导航组件

export default class Nav extends Component { 
    render() { 
     return (
      <nav className="navigation"> 
       <ul className="nav-container"> 
        <li> 
         <NavLink to="/" className="nav-title"> 
          First Page 
         </NavLink> 
        </li> 
        <li> 
         <NavLink to="second-page" className="nav-title"> 
          Second Page 
         </NavLink> 
        </li> 
        <li> 
         <NavLink to="third-page" className="nav-title"> 
          Third Page 
         </NavLink> 
        </li> 
       </ul> 
       <div className="nav-decoration"> 

       </div> 
      </nav> 
     ) 
    } 
}

应用程序组件

import Nav from 'whateverthepath'; 

export default class App extends Component { 

    render() { 
     return (
      <div> 
       <Nav/> 
       <Switch> 
        <Route exact path="/" component={Firstpage}/> 
        <Route path="/secondpage" component={Secondpage}/> 

       </Switch> 
      </div> 
     ) 
    } 
}

所有适当的进口做出反应完成

来源

2017-04-06 forJ

只要匹配链接目标的路径在可见呈现分层结构内，React路由器就会呈现它。您的示例应该可以工作，您需要将“App”包装在“Router”中并尝试。 – hazardous

这是绝对有可能和你的榜样甚至应该上班的。你需要确保的最重要的事情是你的<Route>被渲染为某个点。您的示例工作的原因是因为您在与<Switch>声明相同的render（）方法中呈现<Nav>。如果您只是渲染<Nav>而没有渲染switch语句，那么NavLinks会将您带到某个地方，但尚未得到React Router的通知。这就是为什么你的<Route>几乎总是在你最父母的组件中，以确保它们被渲染。

来源

2017-04-06 08:27:43

React-Router-4从另一个组件路由

回答

相关问题