Отображение новых компонентов в верхнем меню / боковой панели React, React Router - PullRequest
Новая
       11

Отображение новых компонентов в верхнем меню / боковой панели React, React Router

0 голосов
/ 04 апреля 2020

Я делаю простую панель управления, использующую реагирование и библиотеку реагирования в пользовательском интерфейсе, а боковая панель имеет несколько ссылок. Я хочу показывать и ссылаться на разные компоненты, когда нажимаю на ссылки на боковой панели, но я хочу, чтобы они отображались на той же странице под верхней панелью и рядом с боковой панелью, а не перенаправлялись на другую пустую страницу или компонент. как я могу этого достичь? это мой основной код для панели. Какие маршрутизаторы я должен использовать в разделах NavLink, чтобы более поздние компоненты отображались на той же странице, что и боковая панель?

Боковая панель. 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

Приложение. 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
...