React-Router学习初体验

安装

npm i react-router-dom 

App.js

import React, { Component } from 'react'
import { Link, BrowserRouter, Route, Routes } from 'react-router-dom'
//标准中 路由组件应该放在pages文件夹里面
import Home from './pages/Home'
import About from './pages/About'
import Header from "./component/Header"
//react 中靠路由链接实现切换组件
export default class App extends Component {
    render() {
        return (
            // 不再这里包BrowserRouter 可以去index.js里面包
            <BrowserRouter>
                <div className="container">
                    <Header/>
                    <div className='row2'>
                        <div className='left'>
                            {/* 编写路由链接 */}
                            <Link className="left-items" to='/about'>About</Link>
                            <Link className="left-items" to='/home'>Home</Link>


                        </div>
                        <div className='right'>
                            {/* 注册路由 */}
                            <Routes>
                                <Route path='/about' element={<About/>}/>
                                <Route path='/home' element={<Home/>} />
                            </Routes>
                        </div>
                    </div>
                </div>
            </BrowserRouter>

        )
    }
}

路由组件

import React, { Component } from 'react'

export default class About extends Component {
    render() {
        return (
           <h3>I am About2</h3>
        )
    }
}