来自另一个组件的 React-Router-4 路由答案

【问题标题】：React-Router-4 routing from another component来自另一个组件的 React-Router-4 路由
【发布时间】：2017-04-06 05:46:09
【问题描述】：

是否可以从另一个组件路由一个组件？

所以通常会像下面这样完成

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

所有适当的 React 导入都已完成

【问题讨论】：

只要匹配链接目的地的 Route 在可见的渲染层次结构内，React Router 就会渲染它。您的示例应该可以工作，您需要将 App 包装在 Router 中并尝试一下。

标签： javascript reactjs react-router

【解决方案1】：

这绝对是可能的，您的示例甚至应该按原样工作。您需要确保的最重要的事情是您的<Route>s 被渲染为某个点。您的示例有效的原因是因为您在与您的 <Switch> 语句相同的 render() 方法中渲染 <Nav> 。如果你只是渲染<Nav> 而不渲染 switch 语句，那么 NavLinks 会将你带到 React Router 没有被告知的地方。这通常是为什么您的 <Route>s 几乎总是在您的最父组件中，以确保它们被渲染。

【讨论】：