我有一个简单的网络应用程序,使用create-react-app和express。
一旦部署到Heroku,使用react路由器制作的所有页面都可以在本地工作,也可以在我自己的计算机上在线 。
但是,在其他机器上进行在线测试后,我无法访问这些页面 - 每当我点击指向它们的链接时,都会显示Cannot GET /*route*
如果以任何方式影响它,我仍然拥有* name * .herokuapp.com域
我使用的重定向代码如下:(我也使用firebase和react-bootstrap)
class App extends Component {
render() {
return (
<div>
<MyNavbar/>
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path="/eateries" component={Eateries}/>
<Route exact path="/thank-you" component={ThankYou}/>
</Switch>
</div>
);
}
重定向到/谢谢你:
componentWillMount() {
firebase.auth().onAuthStateChanged((user) => {
if (user) {
window.location = "thank-you"
}
})
}
因此,当用户通过模态组件登录时,它应该将它们带到/感谢你
重定向到/餐馆:
<NavItem href="/eateries">
For Eateries
</NavItem>
我重定向用户或使用反应路由器的方式是否有问题?
答案 0 :(得分:2)
如果没有看到您的服务器代码,很难知道 - 但为了支持react-router
的渲染机制,您需要在服务器代码中使用通配符路由:
app.get('*', (req, res) => res.sendFile(path.resolve('build', 'index.html'));
这基本上意味着“对于任何尚未匹配的路由,发送index.html
文件”,然后加载您的webapp,后者将处理路由。请注意,您需要在此之前添加为您的资产提供服务的静态中间件 - 这是我多次忘记的问题。您的大多数服务器文件将如下所示:
const express = require('express');
const app = express();
app.use(express.static('build'));
app.get('*', (req, res) => res.sendFile(path.resolve('build', 'index.html'));
app.listen(process.env.PORT, () => console.log('listening for connections'));
现在,这似乎在本地工作,因为您的网络应用已经加载,并为您处理路由。
但是,我注意到您在重定向用户时使用window.location
。这使得一些浏览器至少(可能全部)从服务器请求新页面,而不是让应用程序处理它。而是使用提供的history
属性,该属性包含push
方法。
componentWillMount() {
firebase.auth().onAuthStateChanged((user) => {
if (user) {
this.props.history.push('/thank-you');
}
});
}
这会在历史堆栈中添加一个新条目。如果您想要定期重定向,则应使用.replace
代替。
希望这有帮助!