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

原创已于 2023-04-08 16:18:46 修改 · 95 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #学习 #javascript

于 2023-03-29 21:49:42 首次发布

React学习专栏收录该内容

7 篇文章

订阅专栏

这是一个React应用的代码示例，展示了如何利用`react-router-dom`库进行页面路由和导航。`BrowserRouter`作为顶级组件，`Route`用于定义路径和对应的组件，而`NavLink`则用于创建可点击的导航链接，当链接匹配当前路由时会添加`active`类名。应用包括`Home`和`Manage`两个主要页面。

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>
  )
}

唔，大致就是这个样子