【react】路由（版本为5）笔记

最新推荐文章于 2023-12-15 14:43:59 发布

Elio_21

最新推荐文章于 2023-12-15 14:43:59 发布

阅读量163

点赞数

分类专栏：前端文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/nolanElio/article/details/129631010

版权

前端专栏收录该内容

37 篇文章 7 订阅

订阅专栏

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