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

Question

可以从另一个组件路由一个组件吗？

因此，通常会像下面这样做

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

App组件

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导入都已完成

Answer 1

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