React router sidebar routes correctly but doesn't show the component under the top menu

问题

I have designed a management panel in React with a sidebar and a top menu. when you click on any links on the sidebar, a component needs to be shown under the top menu. But even though the router links work correctly (they change the URL and they show the single component when I load the router link separately), they don't show anything under the top menu and next to the sidebar when I click on the sidebar links. what seems to be the problem?

Edit: the github link of the project, its actually a very light project: 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

routes.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(an example component of one of the links in the sidebar that needs to be loaded under the topbar)

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

App.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

what seems to be the problem?

回答1:

Here is updated 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 and Link are both anchor tags so it shouldnt be nested.

And, you should use the same router in App.js and Sidebar.js

For example, your project now has got different routes

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

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

来源：https://stackoverflow.com/questions/61139486/react-router-sidebar-routes-correctly-but-doesnt-show-the-component-under-the-t

标签

javascript