首页 文章

反应路由器:客户端路由与服务器端路由

提问于
浏览
0

我正在玩反应路由器 . 我用它创建了一个简单的应用程序 .

https://react-04-router.herokuapp.com/

如果单击aboutus或contactus,则URL正在更改,并且正在显示新内容 . 到目前为止,一切都很好 .

但是,如果我刷新新链接https://react-04-router.herokuapp.com/aboutus . 它将错误页面显示为"Not Found" .

我在服务器端配置了 not / aboutus路由,我猜这是"Not found"错误即将发生的原因但是这让我想知道如何

  • 如果客户端路由不能支持刷新,那么它不会影响用户体验吗?

  • 为了避免影响用户体验,如果我决定使用服务器端,我知道我会失去更快的客户端路由响应,除此之外,如果我不使用客户端路由,有什么我可能会错过的 .

这是我的路由器文件代码:

import React, { Component } from 'react'
import { Switch, Route } from 'react-router-dom'

import AboutUs from '../presentation/AboutUs';
import ContactUs from '../presentation/ContactUs';
import Home from '../presentation/Home';
import Navbar from '../presentation/Navbar';

class MainLayout extends Component {
  render(){
    return(
        <div >
          <Navbar/>
          <Switch>
            <Route exact path='/' component={Home}/>
            <Route path='/aboutus' component={AboutUs}/>
            <Route path='/contactus' component={ContactUs}/>
          </Switch>              
        </div>       
      )
  }
}

export default MainLayout

这是app.js文件呈现

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter } from 'react-router-dom'

import Header from './presentation/Header';
import Footer from './presentation/Footer';
import MainLayout from './layout/MainLayout'

class App extends Component {
    render(){
        return(
            <div className="container-fluid">
                <Header />
                    <MainLayout/>
                <Footer />
            </div>
            )
    }
}


ReactDOM.render(
    <BrowserRouter>
        <App/>
    </BrowserRouter>,
    document.getElementById('root'))

1 回答

  • 0

    在这种情况下我建议使用HashRouter,参见Hash Router here

相关问题