反应路由器侧边栏正确路由但不显示顶部菜单下的组件

Question

我在 React 中设计了一个带有侧边栏和顶部菜单的管理面板。 当您单击侧边栏上的任何链接时，需要在顶部菜单下显示一个组件。 但是即使路由器链接正常工作（它们更改了 URL 并且当我单独加载路由器链接时它们显示单个组件），当我单击侧边栏链接时，它们不会在顶部菜单下和边栏旁边显示任何内容. 似乎是什么问题？

编辑：项目的github链接，它实际上是一个非常轻的项目： https://github.com/LaMentaAzul/Test

Sidebar.js

import{ BrowserRouter,Route, Link } from 'react-router-dom'
import {routes} from './../../routes.js'
import CreateJob from './../../Views/Forms/CreateJob.js'
import BasicInfo from './../../Views/Contents/BasicInfo.js'
import Dashboard from './../../Views/Contents/Dashboard.js'
....

class Sidebar extends Component {

    state = {
      navActive : '0'
    }

  render () {
    return (
      <BrowserRouter>
      <ContainerVertical style={{ backgroundColor: '#2d2e2e', height: '100vh', float:'right'}} >
      <ContainerHorizontal >
      <NavPanel dark >
        <NavTitle style={{ fontFamily: 'IranSans', textAlign: 'Center' }}>
       لوگو اینجا قرار بگیرد
        </NavTitle>
        <NavSection>
          <NavSectionTitle />
          <NavSectionTitle />  

          <NavLink  key='1' style={linkStyles.base} rightEl={<FiMonitor style={linkStyles.Icon} />} className={this.state.navActive === '1' ? 'active' :' ' }
          onClick={() => this.setState({ navActive:'1' })} style={this.state.navActive !== '1' ? {fontFamily:'IranSans'} : {...linkStyles.base, borderStyle:'solid',
          borderWidth:'0px 5px 0px 0px',
          borderColor:'#50d48b'
          }
          } 
          >
          <Link Component={Dashboard} style={{color:'lightblue'}} to='/dashboard'>داشبورد</Link>          
          </NavLink>  

            ........

        {routes.map((route, index) => (
          <Route
            key={index}
            path={route.path}
            exact={route.exact}
            component={route.main}
          />
        ))}

      </NavPanel>
      </ContainerHorizontal>
      </ContainerVertical>
      </BrowserRouter>
    )
  }
}

export default Sidebar

路由.js

import React from 'react'

export const routes = [
  {
    path: '/dashboard',
    exact: true
  },
  {
    path: '/createjob',
    exact: true
  }
....
]

export default routes

HRPanel.js

import SideBar from './../../Components/SideBar/SideBar'
import NavBar from './../Navigation Bar/NavBar.js'

class HRPanel extends Component {
  render () {
    return (
      <div id='App'>
        <SideBar />
        <NavBar />
      </div>
    )
  }
}

export default HRPanel

Dashboard.js（侧边栏中需要在顶栏下加载的链接之一的示例组件）

class Dashboard extends Component {
  render () {
    return (
      <ContainerVertical>
        <ContainerHorizontal>
          <ScrollArea>
            <WidgetContainer style={{
              background: 'var(--bg-base)',
              border: '1px solid var(--border-color-base)',
              height: '400px',
              width: '100px',
              position: 'relative',
              top: '500px'
            }}
            >
              <Widget padding>
                <h2>
                   Title
                </h2>
              </Widget>
            </WidgetContainer>
          </ScrollArea>
        </ContainerHorizontal>
      </ContainerVertical>
    )
  }
}

export default Dashboard

应用程序.js

.....

import Insurance from './Views/Contents/Insurance.js'
import Jobs from './Views/Contents/Jobs.js'
import Management from './Views/Contents/Management.js'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

function App () {
  return (
    <Router>
      <Switch>
        <Route exact path='/' component={Login} />
        <Route exact path='/hrpanel' component={HRPanel} />
        <Route exact path='/createjob' component={CreateJob} />
        <Route exact path='/basicinfo' component={BasicInfo} />
        <Route exact path='/dashboard' component={Dashboard} />
        <Route exact path='/education' component={Education} />
        <Route exact path='/feedback' component={Feedback} />
        <Route exact path='/finance' component={Finance} />
        <Route exact path='/insurance' component={Insurance} />
        <Route exact path='/jobs' component={Jobs} />
        <Route exact path='/management' component={Management} />
      </Switch>
    </Router>
    // <Login> </Login>
    // <HRPanel> </HRPanel>
  )
}
export default App

似乎是什么问题？

Answer 1

这是更新的Sidebar.js

   import{ BrowserRouter,Route, Link } from 'react-router-dom'
    import {routes} from './../../routes.js'
    import CreateJob from './../../Views/Forms/CreateJob.js'
    import BasicInfo from './../../Views/Contents/BasicInfo.js'
    import Dashboard from './../../Views/Contents/Dashboard.js'

        class Sidebar extends Component {

            state = {
              navActive : '0'
            }

          render () {
            return (
              <BrowserRouter>
              <ContainerVertical style={{ backgroundColor: '#2d2e2e', height: '100vh', float:'right'}} >
              <ContainerHorizontal >
              <NavPanel dark >
                <NavTitle style={{ fontFamily: 'IranSans', textAlign: 'Center' }}>
               لوگو اینجا قرار بگیرد
                </NavTitle>
                <NavSection>
                  <NavSectionTitle />
                  <NavSectionTitle />  

                  <NavLink  key='1' style={linkStyles.base} rightEl={<FiMonitor style={linkStyles.Icon} />} className={this.state.navActive === '1' ? 'active' :' ' }
                  onClick={() => this.setState({ navActive:'1' })} style={this.state.navActive !== '1' ? {fontFamily:'IranSans'} : {...linkStyles.base, borderStyle:'solid',
                  borderWidth:'0px 5px 0px 0px',
                  borderColor:'#50d48b'
                  }
                  }
href="/dashboard" 
                  >
                 داشبورد       
                  </NavLink>  

                    ........

                {routes.map((route, index) => (
                  <Route
                    key={index}
                    path={route.path}
                    exact={route.exact}
                    component={route.main}
                  />
                ))}

              </NavPanel>
              </ContainerHorizontal>
              </ContainerVertical>
              </BrowserRouter>
            )
          }
        }

        export default Sidebar

NavLink 和 Link 都是锚标记，因此不应嵌套。

而且，您应该在 App.js 和 Sidebar.js 中使用相同的路由器

例如，您的项目现在有不同的路线

<Route exact path='/jobs' component={Jobs} /> - App.js

<Link Component={Jobs} style={{color:'lightblue'}} to='/ُjobs'>مشاهده فرصتهای شغلی</Link> - Sidebar.js