Question

我正在使用react和UI react库制作一个简单的管理面板，并且边栏具有多个链接。当我单击侧栏链接时，我想显示并链接到不同的组件，但是我希望它们显示在顶部栏下方和侧栏旁边的同一页面上，而不重定向到另一个空白页或组件。我该如何实现？这是我的面板主要代码。我应该在NavLink部分中使用哪些路由器，以便以后的组件与侧栏显示在同一页面上？

Sidebar.js

import React, { Component } from 'react'
import NavPanel from '@duik/nav-panel'
import NavTitle from '@duik/nav-title'
import NavSection from '@duik/nav-section'
import NavSectionTitle from '@duik/nav-section-title'
import NavLink from '@duik/nav-link'
import Radium from 'radium'
import 'react-router-dom'
class Sidebar extends Component {
    state = {
      navActive : '0'
    }

  render () {
    return (
      <NavPanel dark style={{ backgroundColor: '#2d2e2e', height: '100vh', float:'right'}}>
        <NavTitle style={{ fontFamily: 'IranSans', textAlign: 'Center' }}>
       لوگو اینجا قرار بگیرد
        </NavTitle>
        <NavSection>
          <NavSectionTitle />
          <NavSectionTitle />
          <NavLink key='1' style={linkStyles.base} rightEl={<IoIosAdd style={linkStyles.AddIcon} />} className={this.state.navActive === '1' ? 'active' :' ' }
          onClick={() => this.setState({ navActive:'1' })} style={this.state.navActive !== '1' ? {fontFam

ily:'IranSans'} : {...linkStyles.base, borderStyle:'solid',
          borderWidth:'0px 5px 0px 0px',
          borderColor:'#50d48b'
          }
          }
          >
             اضافه کردن فرصت شغلی
          </NavLink>

         .....

        </NavSection>
      </NavPanel>

    )
  }
}

export default Radium(Sidebar)

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

App.js

function App () {
  return (
     <Router>
      <Switch>
        <Route exact path='/' component={Login} />
        <Route exact path='./Components/HR Panel/HRPanel.js' component={HRPanel} />
      </Switch>
    </Router>
    //<Login> </Login>
    // <HRPanel> </HRPanel>
  )
}
export default App

在顶部菜单/侧边栏中显示新组件React，React Router

0 个答案: