Question

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

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

Sidebar.js

div {
  height: 112px;
  width: 200px;
}

div > svg {
  height: 100%;
  width: 100%;
  background-color: whitesmoke;
}

polygon {
  fill: none;
  stroke: black;
  stroke-width: 0.1;
}

routes.js

<div>
  
  <!-- SVG wrapper without viewBox to take parent's dimensions -->
  <svg>
  
    <!-- sub SVG that will be resized -->
    <svg viewBox="0 0 100 100" preserveAspectRatio="none">
      <g>
        <polygon points="0,0 100,0 65,35 35,35"></polygon>
        <text x="42" y="20"></text>
      </g>
      <g>
        <polygon points="100,0 100,100 65,65 65,35"></polygon>
        <text x="81" y="53"></text>
      </g>
      <g>
        <polygon points="0,100 35,65 65,65 100,100"></polygon>
        <text x="42" y="91"></text>
      </g>
      <g>
        <polygon points="0,0 35,35 35,65 0,100"></polygon>
        <text x="5" y="53"></text>
      </g>
    </svg>
    
    <!-- regular SVG elements that won't be resized -->
    <text id="ok_text" 
          x="50%" y="50%" 
          text-anchor="middle" 
          alignment-baseline="middle">
      OK
    </text>
    
  </svg>
</div>

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

Dashboard.js（侧边栏中的一个链接的示例组件，需要将其加载到顶部栏下方）

import React from 'react'

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

export default routes

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

似乎是什么问题？

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

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

1 个答案: