React路由BrowserRouter的基本使用完整代码

缺乏、安全感 2023-09-25 22:13 17阅读 0赞

--------------------

title: React教程  
date: 2023-04-06 20:51:55  
tags: \[react\]  
categories: \[js\]

--------------------

## React路由的基本使用 ##

zxl@linux:~/Desktop$ node -v
    v16.17.0
    zxl@linux:~/Desktop$ npm -v
    8.15.0
    
    npm i -g create-react-app 
    
    create-react-app router-demo1
    
    cd router-demo1
    
    npm start
    
    # 安装路由
    npm i react-router-dom

### index.js ###

import React from "react";
    import ReactDOM from "react-dom";
    import {
        BrowserRouter} from "react-router-dom"
    import App from "./App";
    
    ReactDOM.render(
        <BrowserRouter>
            <App/>
        </BrowserRouter>,
        document.getElementById("root")
    )

### App.jsx ###

import React from 'react'
    import {
        Link,Route} from 'react-router-dom'
    import Home from './components/Home'
    import About from './components/About'
    
    export default function App() {
        
      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">
    
                        {
        /* 原生html中，靠<a>跳转不同的页面 */}
                        {
        /* <a className="list-group-item" href="./about.html">About</a>
                        <a className="list-group-item active" href="./home.html">Home</a> */}
    
                        {
        /* 在React中靠路由链接实现切换组件--编写路由链接 */}
                        <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>
      )
    }

### About/index.jsx ###

import React from 'react'
    
    export default function About() {
        
      return (
        <div>About</div>
      )
    }

### Home/index.jsx ###

import React from 'react'
    
    export default function Home() {
        
      return (
        <div>Home</div>
      )
    }

### index.html ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8" />
    		<title>react脚手架</title>
    		<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    		<link rel="stylesheet" href="/css/bootstrap.css">
    		<style>
    			.atguigu{
          
    				background-color: rgb(209, 137, 4) !important;
    				color: white !important;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="root"></div>
    	</body>
    </html>