Как сохранить состояние, если я вручную введу URL для других маршрутов?

Question

Это мой первый раз, когда я создаю полный стек с использованием стека MERN.Я создал панель навигации, которая показывает текущего вошедшего в систему пользователя, когда пользователь входит в систему.

Моя проблема заключается в том, что всякий раз, когда я пытаюсь ввести URL-адрес для других маршрутов, мое состояние исчезает.Из того, что я понимаю из чтения других постов, это создает новую связь, в которой инициируются состояния?

Как сохранить то же соединение при вводе URL-адреса для других маршрутов?(http://localhost:3000/dorm/rooms)

Я довольно новичок в реакции-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);