React基础语法的学习---5.第一个React项目

import './App.css';
import { BrowserRouter ,Route,NavLink } from 'react-router-dom';  //navlink 可以传入样式
import Home from './home'
import Manage from './manage'

export default  function App(){
  return (
    <div className="container">
        <BrowserRouter>
          {/* 左侧导航 */}
           <div className="sidebar">
              <div className="title">简易demo</div>
              <ul>
                <li>
                  <NavLink to='/home' className= {({isActive})=>isActive?'active':''}>首页</NavLink>
                </li>
                <li>
                  <NavLink to='/manage' className= {({isActive})=>isActive?'active':''}>分组</NavLink>
                </li>
              </ul>
           </div>
           {/* 右侧主体 */}
           <div className='main'>
                  {/* 路由           加载的页面 */}
             <Route path='/home' element={<Home/>}/> 
             <Route path='/manage' element={<Manage/>}/> 
           </div>
        </BrowserRouter>
    </div>
  )
}

 唔，大致就是这个样子