我正在try 在Reaction路由的帮助下改变基于路由的样式.所以我希望描述路径在用户处于描述路径时为橙色,当用户在教师添加课程路径中时为白色,当在其他路径时为绿色,但当我在其他路径时我的最后条件是不渲染.我已经用三元运算符try 了这些条件.有人能帮忙吗?
我试过用三元运算符&;编写条件,当我在教师-添加-课程路径&;描述路径时,它起作用,但当我在其他路径,如要求,该条件不适用.
import React from 'react';
import { FaBookOpen } from 'react-icons/fa';
import { Link, useLocation } from 'react-router-dom';
import '../../asset/css/Teachers-overview/TeachersDashboardSidebar.css'
const TeachersDashboardSidebar = () => {
let location = useLocation()
console.log(location.pathname);
return (
<div className='sidebar-container'>
<div className='sidebar-content-wrapper'>
<div className='overview-wrapper'>
<div className='d-flex flex-column align-items-center'>
<div className= {`${location.pathname=== '/teacher-add-course'? 'progress-book-icon bg-orange':'progress-book-icon bg-complete'}`}>
<FaBookOpen className="text-white " />
</div>
<div className={`${location.pathname==='/teacher-add-course'? 'candle-basic':'candle-success'}`}></div>
</div>
<Link to="/teacher-add-course"><span className="text-semilight font-weight-bold mt-2 ml-3">Overview</span></Link>
</div>
<div className='bold d-flex'>
<div className='d-flex flex-column align-items-center'>
<div className={`${location.pathname=== '/teacher-add-course/description'?'bg-orange':'teacher-add-course'?'progress-book-icon':'bg-complete'} `}>
<FaBookOpen className="text-white " />
</div>
<div className={`${location.pathname==='/teacher-add-course/description'? 'candle-basic':'candle-success'}`}></div>
</div>
<Link to="/teacher-add-course/description"><span className="text-semilight font-weight-bold mt-2 ml-3">Description</span></Link>
</div>
<div className='text-warning bold d-flex'>
<div className='d-flex flex-column align-items-center'>
<div className={`${location.pathname=== '/teacher-add-course/requirements'? 'progress-book-icon bg-orange': '/teacher-add-course/gallery'? 'progress-book-icon bg-complete':'progress-book-icon'}`}>
<FaBookOpen className="text-white " />
</div>
<div className={`${location.pathname==='/teacher-add-course/requirements'? 'candle-basic':'candle-success'}`}></div>
</div>
<Link to="/teacher-add-course/requirements"><span className="text-semilight font-weight-bold mt-2 ml-3">Requirements</span></Link>
</div>
</div>
</div>
);
};
export default TeachersDashboardSidebar;