Question

我的网站分为两个部分，一个＆＃34; Side＆＃34;显示导航菜单和＆＃34; View＆＃34;使用＆＃34;菜单＆＃34;显示特定组件的组件取决于您单击的导航按钮。

问题是组件永远不会渲染。

我的菜单组件：

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/>和＆lt; Link/>组件必须是同一<Router/>组件的子组件。将您的<Router/>组件向上移动到视图和侧边栏组件的公共祖先，并从视图和侧边栏组件中删除<Router />组件。

如果您使用的是redux，则需要将<Route/>组件的组件与withRouter HoC包装在一起。

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

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

1 个答案: