React-react-router6.0 路由的基本使用

效果图

目录结构

安装路由

npm add react-router-dom

index.js

//引入react核心库
import React from "react";
//引入ReactDOM
import ReactDOM from "react-dom";
//引入App
import App from "./App";
import {BrowserRouter } from "react-router-dom";

ReactDOM.render(
  <BrowserRouter >
    <App />
  </BrowserRouter>,

  document.getElementById("root")
);

App.js

import React, { Component } from "react";
import { Link, Route, Routes } from "react-router-dom";
import Home from "./pages/Home";        //home是路由组件
import About from "./pages/About";      //about是路由组件
import Header from './components/Header'//header是一般组件
class App extends Component {
  render() {
    return (
      <div>
        <div className="row">
          <div className="col-xs-offset-2 col-xs-8">
            <Header a={1}/>
          </div>
        </div>
        <div className="row">
          <div className="col-xs-2 col-xs-offset-2">
            {/*原生html中,靠<a>跳转不同的页面 */}
            {/* <div className="list-group">
                        <a className="list-group-item active" href="./about.html">About</a>
                        <a className="list-group-item" href="./home.html">Home</a>
                    </div> */}
            {/* 在React中靠路由链接实现切换组件 --编写路由链接*/}
            <Link className="list-group-item" to="/about">
              About
            </Link>
            <Link className="list-group-item" to="/home">
              Home
            </Link>
          </div>
          <div className="col-xs-6">
            <div className="panel">
              <div className="panel-body">
                <Routes>
                  <Route path="/about" element={<About />} />
                  <Route path="/home" element={<Home />} />
                </Routes>
                {/* 注册路由 */}
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

Home/index.jsx

import React, { Component } from 'react';

class Home extends Component {
    render() {
        return (
            <div>
                <h3>我是Home的内容</h3>
            </div>
        );
    }
}

export default Home;

About/index.jsx

import React, { Component } from 'react';

class About extends Component {
    render() {
        return (
            <div>
                <h3>我是about内容</h3>
            </div>
        );
    }
}

export default About;

Header/index.jsx

import React, { Component } from 'react';

class Header extends Component {
    render() {
        console.log('Header组件收到的props是',this.props)
        return (
            <div className="page-header">
               <h2>React Router Demo</h2>
            </div>
        );
    }
}

export default Header;