import React from 'react'
import ReactDOM from 'react-dom'
import {BrowserRouter} from 'react-router-dom'
import App from './App'
ReactDOM.render(,document.getElementById('root')
)
一级路由
与
v6版本中移出了先前的，引入了新的替代者：。
和 要配合使用，且必须要用包裹。
相当于一个 if 语句，如果其路径与当前 URL 匹配，则呈现其对应的组件。
属性用于指定：匹配时是否区分大小写（默认为 false）。
当URL发生变化时， 都会查看其所有子 元素以找到最佳匹配并呈现组件 。
也可以嵌套使用，且可配合useRoutes()配置 “路由表” ，但需要通过 组件来渲染其子路由。
import React from 'react'
import {NavLink,Routes,Route} from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'
export default function App() {return (
{/* 路由链接 */}AboutHome
{/* 注册路由 */}}/>}/>
)
}
重定向
作用：只要组件被渲染，就会修改路径，切换视图。
replace属性用于控制跳转模式（push 或 replace，默认是push）。
import React from 'react'
import {NavLink,Routes,Route,Navigate} from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'
export default function App() {return (
{/* 路由链接 */}AboutHome
{/* 注册路由 */}}/>}/>}/>
)
}
-----------------------
import React,{useState} from 'react'
import {Navigate} from 'react-router-dom'
export default function Home() {const [sum,setSum] = useState(1)return (
import React from 'react'
import {NavLink,Routes,Route,Navigate} from 'react-router-dom'
import About from './pages/About'
import Home from './pages/Home'
export default function App() {function computedClassName({isActive}){return isActive ? 'list-group-item atguigu' : 'list-group-item'}return (
{/* 路由链接 */}AboutHome
{/* 注册路由 */}}/>}/>}/>)
}
useRoutes路由表----嵌套路由
useRoutes()
作用：根据路由表，动态创建和。
----渲染任何匹配的子级
当产生嵌套时，渲染其对应的后续子路由。
routers/index.js
export default [{path:'/about',element:},{path:'/home',element:,children:[{path:'news',element:},{path:'message',element:}]},{path:'/',element:}
]
---
import React from 'react'
import {NavLink,useRoutes} from 'react-router-dom'
import routes from './routes'
export default function App() {//根据路由表生成对应的路由规则const element = useRoutes(routes)return (
{/* 路由链接 */}AboutHome
{/* 注册路由 */}{element})
}
---
import React from 'react'
import {NavLink,Outlet} from 'react-router-dom'
export default function Home() {return (
Home组件内容
News
Message
{/* 指定路由组件呈现的位置 */}
)
}
路由的params参数
useParams()
作用：返回当前匹配路由的params参数，类似于5.x中的match.params。
import React,{useState} from 'react'
import {Link,Outlet} from 'react-router-dom'
export default function Message() {const [messages] = useState([{id:'001',title:'消息1',content:'锄禾日当午'},{id:'002',title:'消息2',content:'汗滴禾下土'},{id:'003',title:'消息3',content:'谁知盘中餐'},{id:'004',title:'消息4',content:'粒粒皆辛苦'}])return (
{messages.map((m)=>{return (// 路由链接{m.title})})}
{/* 指定路由组件的展示位置 */}
)
}
----
import React from 'react'
import {useParams,useMatch} from 'react-router-dom'
export default function Detail() {const {id,title,content} = useParams()// const x = useMatch('/home/message/detail/:id/:title/:content')// console.log(x)return (
