Я получил новый React Temaplate и начал проект системы регистрации на основе ролей 2 недели назад.У меня есть проблема с отображением ролевого dashbaord и ролевого меню на боковой панели, когда я перемещаю старый код внешнего интерфейса в новый шаблон.Поэтому я покажу вам как мой старый, так и новый код макета. (У каждого пользователя есть role_id, например, role_id администратора - 2 или role_is учителя - 4) Кто-нибудь может мне помочь?
Вот мой старый список меню боковой панели внешнего интерфейса.
{localStorage.getItem('role_id') == 3?<li className="nav-item">
<Link to='/operatordashboard'><a className="nav-link">
Dashboard
</a></Link>
</li>:''}
{localStorage.getItem('role_id') == 2?<li className="nav-item">
<Link to='/admindashboard'><a className="nav-link">
Dashboard
</a></Link>
</li>:''}
{localStorage.getItem('role_id')==1? <li className="nav-item">
<Link to='/schools'><a className="nav-link" data-toggle="tab" href="#tab1" role="tab">
Schools
</a></Link>
</li>:''}
{localStorage.getItem('role_id') == 2? <li className="nav-item">
<Link to='/branchs'><a className="nav-link" data-toggle="tab" href="#tab2" role="tab">
Branch
</a></Link>
</li>:''}
{localStorage.getItem('role_id') == 1 || localStorage.getItem('role_id') == 2 || localStorage.getItem('role_id') == 3?
<li className="nav-item">
<Link to='/lessons'><a className="nav-link" data-toggle="tab" href="#tab2" role="tab">
Lessons
</a></Link>
</li>:''}
и вот боковая панель макета моего нового шаблона (использовалась карта для рендеринга маршрутизаторов)
return (
<li className={this.activeRoute(prop.path) + ' sidebar-item'} key={key} >
<span data-toggle="collapse" className="sidebar-link has-arrow" aria-expanded={this.state[prop.state]} onClick={() => this.setState(seconddd)} >
<i className={prop.icon} />
<span className="hide-menu">{prop.name}</span>
</span>
{/*--------------------------------------------------------------------------------*/}
{/* Sub-Menus wiil be goes here */}
{/*--------------------------------------------------------------------------------*/}
<Collapse isOpen={this.state[prop.state]}>
<ul className="second-level">
{prop.subchild.map((prop, key) => {
if (prop.redirect) return null;
return (
<li className={this.activeRoute(prop.path) + ' sidebar-item'} key={key} >
<NavLink to={prop.path} activeClassName="active" className="sidebar-link">
<i className={prop.icon} />
<span className="hide-menu">{prop.name}</span>
</NavLink>
</li>
);
})}
</ul>
</Collapse>
</li>
);