Question

我认为React Router的全部目的是用户可以在我的SPA中单击不同的“页面”，并在浏览器中使用不同的URL进入不同的视图，而不必发出请求服务器获取该页面。

因此，他们在www.example.com上，并且他们想要访问www.example.com/about，因此单击“关于”按钮，它们便被带到“关于”页面，而无需发出请求。再次访问服务器，因为该内容已经在最初提供的javascript中存在。

我注意到情况并非如此。但是真正奇怪的是，它只发生在Chrome上。在Firefox和Internet Explorer上，它可以按预期工作。它会发出一个请求，然后当我导航到其他页面时不再发出任何请求，但是在chrome上，只要URL更改，它都会向服务器发出另一个请求。

这是我的设置：

nodejs服务器（特别是请求路由）：

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

我只有一条路线可提供模板，因为如果用户在www.example.com/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组件来自“ react-router-dom”，但是也有Navbar和NavItem组件来自“ reactstrap”。 Reactstrap也有NavLink组件，但是我确保使用react-router NavLinks，以便按预期的方式进行路由。因此，只要客户端在IE / firefox / safari浏览器上单击任何那些NavLink组件，它就会按照我想要的方式工作，但是如果是在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

我希望我在React代码中做错了什么，这不是一个chrome问题，因为如果真是可耻的是，即使我的用户每次都向我的服务器发出请求，不需要。

React路由器在不应该进行的时候不断发出请求

0 个答案: