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'))
答
我想在这种情况下使用HashRouter建议app.js文件,请参阅Hash Router here
+0
但是,根据我的最佳知识,散列路由器适用于静态页面,而不适用于动态内容 – Conquistador
需要看看你如何实现'react-router'。请包括一些代码 –
@EdgarHenriquez感谢您的回复。我添加了路由器代码。请让我知道是否需要任何进一步的代码。 – Conquistador
您不必处理后端中的每条特定路由,但是您需要全部捕获,以便如果它们向服务器发送未明确定义的路由的请求,则可以将index.html发送回并让前端路由器将它们带到他们想要的页面。看看我在这个问题上的答案了解更多细节和代码修复示例:https://*.com/questions/45030285/react-router-v4-page-refresh-not-working/45030808#45030808 – Jayce444