React маршрутизатор продолжает делать запросы, когда он не должен

Question

Я думал, что весь смысл маршрутизатора React заключается в том, что пользователь может щелкнуть другую «страницу» в моем SPA и перейти к другому представлению с другим URL-адресом в своем браузере, но не должен делать запрос ксервер, чтобы получить эту страницу.

Итак, они на www.example.com, и они хотят перейти на www.example.com/about, поэтому они нажимают кнопку О программе, и их перенаправляют настраница about без необходимости повторного запроса к серверу, потому что этот контент уже находится в javascript, который они изначально обслуживали.

Я заметил, что это не так.Но что действительно странно, так это то, что это происходит только в Chrome.На Firefox и Internet Explorer все работает как положено.Он делает запрос один раз, а затем, когда я перехожу на разные страницы, он больше не делает запросов, но в chrome, каждый раз, когда изменяется URL, он делает другой запрос к серверу.

Вот мои настройки:

сервер nodejs (в частности, маршрутизация запросов):

app.get('/*', (req, res) => {
   res.render('home')
})

У меня есть только один маршрут, который обслуживает шаблон, потому что если пользователь находится на www.example.com/about, и онЕсли вы хотите добавить эту страницу в закладки, то в следующий раз, когда они откроют эту ссылку, я хочу, чтобы они были перенаправлены непосредственно на страницу about моего приложения реагирования, вместо того, чтобы создавать отдельные маршруты для каждой страницы.Пожалуйста, дайте мне знать, если это может быть, где ошибка.Я действительно не верю, что ошибка отсюда, хотя, потому что почему Firefox и Internet Explorer работают так, как он должен, а Chrome нет?

Код реагирования (в частности, навигация)

import React, {Component} from 'react'
import { NavLink } from 'react-router-dom'
import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, UncontrolledDropdown, DropdownToggle, DropdownMenu, DropdownItem, Button } from 'reactstrap'
import './Navigation.css'

export default class Navigation extends Component {


  constructor(props) {
    super(props)
    this.data = props.data
    this.toggle = this.toggle.bind(this)
    this.state = {isOpen: false}
    this.nav_color = {backgroundColor: this.data.nav_color}
    this.create_color = {
      backgroundColor: this.data.create_btn_color,
      color: this.data.create_btn_text_color,
    }
    this.nav_link_color = {color: this.data.nav_link_color}
  }

  toggle() {
    this.setState({isOpen: !this.state.isOpen})
  }

  render() {
    return pug`
        Navbar(color='custom' light, expand='md', style='{this.nav_color}')
          NavbarBrand(href='#')
            NavLink(to='/')
              img(src='{this.data.logo_url}' className='img-responsive img-correction1')
            NavLink(to='/create' className='add_panel_btn')
              Button(color='customm', style='{this.create_color}') Create A Panel
          NavbarToggler(onClick='{this.toggle}')
          Collapse(isOpen='{this.state.isOpen}' navbar)
            Nav(className='ml-auto' navbar)
              NavItem
                NavLink(to='/About' className='nav-link', style='{this.nav_link_color}') About
              NavItem
                NavLink(to='/FAQ' className='nav-link', style='{this.nav_link_color}') FAQ
              NavItem
                NavLink(to='/Contact' className='nav-link', style='{this.nav_link_color}') Contact
    `
  }
}

Я использую загрузчик pug-as-jsx, потому что мне нравится синтаксис.Таким образом, компонент NavLink происходит от'act-router-dom ', но есть также компоненты Navbar и NavItem, которые происходят из' responsestrap '.В Reactstrap также есть компоненты NavLink, но я убедился, что NavLinks-маршрутизатор реакции используется для маршрутизации так, как это должно быть.Поэтому каждый раз, когда клиент нажимает на любой из этих компонентов NavLink в браузере IE / firefox / safari, он работает так, как я хочу, но если он находится в браузере Chrome, то он делает отдельный запрос к серверу.

Также вот корневой код, в котором размещен компонент навигации:

import React, {Component} from 'react'
import { BrowserRouter, Route, Switch} from 'react-router-dom'
import Navigation from './components/Navigation'
import Home from './components/Home'
import Create from './components/Create'


class Root extends Component {

  constructor(props) {
    super(props)
  }

  MyHome() {
   return pug`
      Home(data='{this.data}')
   `
  }

  MyCreate() {
    return pug`
      Create(length='{this.max_title_length}')
    `
  }

  render() {
    return pug`
      BrowserRouter
        #div1
          Navigation(data='{this.data}')
          Switch
            Route(path='/' render='{this.MyHome}' exact)
            Route(path='/create' render='{this.MyCreate}')
            Route(component='{Error}')
    `
  }
}



export default Root

Я надеюсь, что я просто делаю что-то не так в коде реагирования, и что это не проблема Chrome, потому чтоесли это действительно позор, что мои пользователи каждый раз обращаются к моему серверу, даже если им это и не нужно.