【react】路由(版本为5)笔记-爱代码爱编程
什么是路由?
一个路由就是一个映射关系(key:value)
key为路径, value可能是function或component
下载react-router-dom: npm install --save react-router-dom
基本案例
app.jsx
import React, { Component } from 'react'
import {Link,Route} from 'react-router-dom'
import Home from './component/Home'
import About from './component/About'
export default class App extends Component {
render() {
return (
<div>
<div className="row">
<div className="col-xs-offset-2 col-xs-8">
<div className="page-header"><h2>React Router Demo</h2></div>
</div>
</div>
<div className="row">
<div className="col-xs-2 col-xs-offset-2">
<div className="list-group">
{/* 路由链接 */}
<Link className="list-group-item" to="/about" >About</Link>
<Link className="list-group-item" to="/home" >Home</Link>
</div>
</div>
<div className="col-xs-6">
<div className="panel">
<div className="panel-body">
{/* 注册路由 */}
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
</div>
</div>
</div>
</div>
</div>
)
}
}
index.js
// 引入react 核心库
import React from 'react'
// 引入ReactDOM
// import ReactDOM from 'react-dom'
import ReactDOM from 'react-dom/client'
// 引入App
import App from './App'
// 渲染
import { BrowserRouter } from 'react-router-dom'
// ReactDOM.render(<App/>,document.getElementById('root'))
ReactDOM.createRoot(
document.getElementById('root')
).render(
<BrowserRouter>
<App />
</BrowserRouter>
);