React——react-router路由（基本使用）

什么是路由

        一个路由就是一个映射关系

        key为路径，value可能是function或componen

react-router的理解

        react的一个插件库

        专门用来实现一个SPA的应用

        基于react的项目基本都会用到此库

添加react-router到工程中

npm add react-router --location=global

路由的基本使用

1.明确好界面中的导航区、展示区
2.引入router路由
    import {Link, Route} from 'react-router-dom'  
3.Link标签相当于html中的标签
    Demo  
4.展示区写Rout标签进行路径匹配
    
5.index.js文件中引入进行全局路由包裹。也就是的最外层包裹了一个或
    import {BrowserRouter} from "react-router-dom";

//index.js
import React from "react";
import {createRoot} from "react-dom/client";
import {BrowserRouter} from "react-router-dom";
import App from "./App";
const root = createRoot(document.getElementById("root"))
root.render(
    
        
    
)

事例一

import React, {Component} from 'react';
import {Link, Route} from 'react-router-dom'
import About from "./components/About";
import Home from "./components/Home";
class App extends Component {
    render() {
        return (
            

                

                    

                        
React Router Demo
                    
                
                

                    

                        

                            {/*原神html中，依靠标签跳转不同的页面*/}
                            {/* About
                            Home*/}

                            {/*在React中靠路由链接来跳转组件*/}
                            About
                            Home
                        
                    
                    

                        

                            

                                {/*注册路由*/}
                                
                                
                            
                        
                    
                

            
        );
    }
}

export default App;

react-router相关API

内置组件
    1.
    2.
    3.
    4.
    5.
    6.
    7.