我正在玩反应路由器 . 我用它创建了一个简单的应用程序 .
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 回答
在这种情况下我建议使用HashRouter,参见Hash Router here