如果我手动输入其他路线的URL，如何保持状态？

Question

这是我第一次使用MERN堆栈创建全堆栈Web。我创建了一个导航栏，该导航栏在用户登录时显示当前登录的用户。

我的问题是，每当我尝试输入其他路线的URL时，我的状态就会消失。根据我从阅读其他文章中了解到的情况，这可以建立起一种新的联系，从而启动州？

在输入其他路线的URL时如何保持相同的连接？ （http://localhost:3000/dorm/rooms）

我对react-router-dom很陌生。有人能帮我吗？

下面是我的app.js文件：

import React from "react";
import { Router, Route, Switch } from "react-router-dom";
import { Container, Divider } from "semantic-ui-react";
import history from "../history";
import Home from "./Home";
import Navbar from "./Navbar";
import Login from "./Login";
import Rooms from "./room/Rooms";

const App = () => {
  return (
    <Container fluid>
      <Router history={history}>
        <div>
          <Navbar />
          <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/login" exact component={Login} />
            <Route path="/dorm/rooms" exact component={Rooms} />
          </Switch>
        </div>
      </Router>
      <Divider />
    </Container>
  );
};

export default App;

导航栏

import React, { Component } from "react";
import { Link } from "react-router-dom";
import { connect } from "react-redux";
import { Menu, Icon, Button } from "semantic-ui-react";
import { logout } from "../actions/index";

class Navbar extends Component {
  state = {
    user: null
  };

  componentDidUpdate() {
    if (this.props.auth.username && !this.state.user) {
      this.setState({ user: this.props.auth.username });
    }
  }

  logout = async () => {
    await this.props.logout();
    await this.setState({ user: null });
  };

  renderAuthButton() {
    if (this.state.user) {
      return (
        <Button onClick={this.logout} basic color="red">
          Logout
        </Button>
      );
    } else {
      return (
        <Link to={"/login"}>
          <Button basic color="blue">
            Login
          </Button>
        </Link>
      );
    }
  }

  render() {
    console.log(this.state.user);
    return (
      <div
        style={{
          paddingTop: "4vh",
          paddingLeft: "2vw",
          paddingRight: "2vw",
          backgroundColor: "#FFF270"
        }}
      >
        <Menu color="grey" secondary>
          <Menu.Item name="home">
            <Icon name="home" />
            <Link to="/">Home</Link>
          </Menu.Item>
          <Menu.Menu position="right">{this.renderAuthButton()}</Menu.Menu>
        </Menu>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    auth: state.auth
  };
};

export default connect(
  mapStateToProps,
  { logout }
)(Navbar);