react路由器：客户端路由与服务器端路由

我正在使用react路由器。我创建了一个简单的应用程序使用它。react路由器：客户端路由与服务器端路由

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

如果公司简介或联系我们，网址点击正在发生变化，正在显示新内容。一切工作都很好，直到这一点。

但是，如果我刷新新链接https://react-04-router.herokuapp.com/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'))

来源

2017-08-28 Conquistador

需要看看你如何实现'react-router'。请包括一些代码 –

@EdgarHenriquez感谢您的回复。我添加了路由器代码。请让我知道是否需要任何进一步的代码。 – Conquistador

您不必处理后端中的每条特定路由，但是您需要全部捕获，以便如果它们向服务器发送未明确定义的路由的请求，则可以将index.html发送回并让前端路由器将它们带到他们想要的页面。看看我在这个问题上的答案了解更多细节和代码修复示例：https://stackoverflow.com/questions/45030285/react-router-v4-page-refresh-not-working/45030808#45030808 – Jayce444

我想在这种情况下使用HashRouter建议app.js文件，请参阅Hash Router here

来源

2017-08-28 05:22:55

但是，根据我的最佳知识，散列路由器适用于静态页面，而不适用于动态内容 – Conquistador

react路由器：客户端路由与服务器端路由

回答

相关问题