【react】路由（版本为5）笔记-优快云博客

本文介绍了ReactRouter的基本概念，它是一个用于管理应用中不同页面路由的库。通过`react-router-dom`模块，我们可以创建路由映射，如`Link`用于导航，`Route`用于定义组件与路径的绑定。在示例中，展示了如何在`App`组件中设置路由，并在`index.js`中使用`BrowserRouter`进行包裹，实现页面间的无刷新跳转。

什么是路由?
一个路由就是一个映射关系(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>
);