【React】基本路由的使用_单个页面的切换

一、效果

二、需求描述

     点击菜单项，显示对应组件内容。

三、代码实现

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Main from "./components/react_router/main";
import {BrowserRouter} from "react-router-dom";

ReactDOM.render((
        <BrowserRouter>
            <Main/>
        </BrowserRouter>
    ),
    document.getElementById('root')
);

main.js（其中的Link可以使用NavLink）

import React, {Component} from 'react';
import {Link, Switch, Route, Redirect} from "react-router-dom";
import Home from './home'
import About from './about'
import User from './user'

class Main extends Component {
    render() {
        return (
            <div>
                <h2>React Router 基本路由使用</h2>
                <ul>
                    <li><Link to="/home">Home</Link></li>
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/user">User</Link></li>
                </ul>
                <hr/>
                <div style={{margin: "20px"}}>
                    <Switch>
                        <Route path="/home" component={Home}/>
                        <Route path="/about" component={About}/>
                        <Route path="/user" component={User}/>
                        <Redirect to="/home"/>
                    </Switch>
                </div>
            </div>
        );
    }
}

export default Main;

home.js（about.js和user.js内容与home.js类似，此处省略）

import React, {Component} from 'react';

class Home extends Component {
    render() {
        return (
            <div>
                我是Home组件
            </div>
        );
    }
}

export default Home;