反應路由器不能GET /路由後才部署到Heroku

Question

我有一個簡單的網絡應用程序與創建反應，應用程序和表達。

使用反應路由器製作的所有頁面都可以在本地正常工作，以及在我自己的機器上在線一旦部署到Heroku。

但是，在其他機器在線測試後，我無法訪問這些頁面 - 每當我點擊他們來說，這顯示Cannot GET /*route*

我仍然有*名稱的鏈接* .herokuapp.com域如果影響以任何方式

我使用重定向代碼如下：（我用的火力和反應，引導和）

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> 

是不是有什麼毛病我的方式m重定向用戶還是一般使用反應路由器？

Answer 1

很難知道沒有看到你的服務器代碼 - 但爲了支持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')); 

現在，這似乎工作，要麼在本地方式，因爲你的web應用程序已經加載，並處理路由給你的。

但是，我注意到您在重定向您的用戶時使用了window.location。這使得一些瀏覽器至少（可能全部）從服務器請求新頁面，而不是讓應用程序處理它。而應使用提供的history屬性，其中包含push方法。

componentWillMount() { 
    firebase.auth().onAuthStateChanged((user) => { 
    if (user) { 
     this.props.history.push('/thank-you'); 
    } 
    }); 
} 

這增加了一個新的條目到歷史堆棧。如果您想要定期重定向，則應該使用.replace。

希望這會有所幫助！