Question

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

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

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

但是，如果我刷新新链接https://react-04-router.herokuapp.com/aboutus。它将错误页面显示为“未找到”。

我在服务器端有不配置/ aboutus路由，我想这就是“未找到”错误即将发生的原因但这让我想知道如何

如果客户端路由不能支持刷新，那么它不会影响用户体验吗？
为了避免影响用户体验，如果我决定使用服务器端，我知道我会丢失更快的客户端路由响应，除此之外，如果我不使用客户端路由，有什么我可能会错过

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

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

这是呈现

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'))

Answer 1

我建议在这种情况下使用HashRouter，请参阅Hash Router here

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

1 个答案: