react_demo/calc/src/components/app.jsx

import React, { Component } from 'react';
import NavBar from './navbar';
import Home from './content/home';
import Calc from './content/calc';
import Login from './content/login';
import Register from './content/register';
import { Routes, Route, Navigate } from 'react-router-dom';
import $ from 'jquery';


class App extends Component {
    state = { 
        is_login: true,
        username: "zfp",
     } 

    // api会有跨域问题
    componentDidMount =  () => {
        $.ajax({
            url: "https://app165.acapp.acwing.com.cn/calculator/get_status/",
            type: "get",
            success: resp => {
                console.log(resp);
                if (resp.result === "login") {
                    this.setState({
                        is_login: true,
                        username: resp.username,
                    })
                }else {
                    this.setState({
                        is_login: false,
                    })
                }
            }

        })
    }

    render() { 
        return (
            <React.Fragment>
                <div className='container'>
                    <NavBar is_login={this.state.is_login} username={this.state.username} />
                    <Routes>
                            <Route path='/' element={<Home />}></Route>
                            <Route path='/home' element={<Home />}></Route>
                            <Route path='/calc' element={this.state.is_login ? <Calc /> : <Navigate replace to="/login" />}></Route>
                            <Route path='/login' element={<Login />}></Route>
                            <Route path='/register' element={<Register />}></Route>
                            <Route path="*" element={ <Navigate replace to="/404" /> } />
                    </Routes>
                </div>
            </React.Fragment>
        );
    }
}
 
export default App;