React Router在部署到Heroku

时间:2017-08-08 10:19:35

标签: reactjs firebase heroku react-router firebase-authentication

我有一个简单的网络应用程序,使用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>

我重定向用户或使用反应路由器的方式是否有问题?

1 个答案:

答案 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代替。

希望这有帮助!