如何在导航部分位于其他组件中时渲染路线？

Question

我的网站分为两个部分，一个显示导航菜单的“侧面”组件和一个带有“菜单”组件的“视图”，该组件显示特定组件取决于您单击的导航按钮。

问题是组件永远不会呈现。

我的菜单组件：

import React from 'react';
import { BrowserRouter as Router, Link, BrowserRouter } from 'react-
router-dom';
import './Menu.css'

class Menu extends React.Component{
    render(){
        return (
        <div className="Menu col 12" >
            <div className="Menu-link" >
                <Router>
                    <ul class="pagination">
                        <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_left</i></a></li>
                        <li class="waves-effect menu-element">
                            <Link to="/work" className="nav-title">
                                <i class="material-icons">equalizer</i>
                            </Link>
                        </li>
                        <li class="waves-effect menu-element">
                            <Link to="/work" className="nav-title">
                                <i class="material-icons">work</i>
                            </Link>
                        </li>
                        <li class="waves-effect menu-element">
                            <Link to="/education" className="nav-title">
                                <i class="material-icons">library_books</i>
                            </Link>
                        </li>
                        {/* <li class="waves-effect menu-element"><a href="/skills"><i class="material-icons">equalizer</i></a></li> */}
                        <li class="waves-effect"><a href="#!"><i class="material-icons">chevron_right</i></a></li>
                    </ul>
                </Router>
            </div>
        </div>
    )
}
}


 export default Menu; 

我的侧面组件：

import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-
router-dom'
import './View.css'

import Work from '../Work/Work'
import Skills from '../Skills/Skills'
import Education from '../Education/Education'

class View extends React.Component{
     render(){
    return (
        <Router>
            <div>
                <Switch>
                    <Route path='/work' component={Work} />
                    <Route path='/skills' component={Skills} />
                    <Route path='/education' component={Education} />
                </Switch>
            </div>
        </Router>
    )
}
}

export default View; 

你有解决方案吗？

Answer 1

所以<Route/>和<Link/>组件需要是同一个<Router/>组件的孩子。将<Router/>组件向上移动到视图和侧边栏组件的共同祖先，并从视图和侧边栏组件中删除<Router />组件。

如果您正在使用redux，则需要使用<Route/> HoC包装具有withRouter组件的组件。

编辑：这是一个example code sandbox，向您展示这是如何工作的。单击侧面的about和home链接以查看组件更改。