React Routerは、Herokuにデプロイされた後にのみGET/ROOTすることはできません。

Question

私はcreate-react-appで作成した簡単なweb-appを持っています。

反応ルータで作成されたすべてのページがローカルで正常に動作し、は自分のマシンでが一度Herokuにデプロイされています。

しかし、他のマシン上でのオンラインテストした後、私はこれらのページにアクセスすることはできません - 私はそれらへのリンクをクリックしたときに、それはそれが影響を与える場合、私はまだ*名* .herokuapp.comドメインを持っているCannot GET /*route*

を表示次のようにそれがどのような方法

に私が使用するリダイレクトコードは次のとおりです。（私はfirebaseを使用して反応させ、ブートストラップだけでなく）

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> 

私は「道と間違って何かがありますユーザーをリダイレクトするか、一般に反応ルータを使用していますか？

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')); 

を今、これはあなたのウェブアプリは、すでにロードされ、そしてあなたのためのルーティングを処理しているので、ローカルのいずれかのように動作するように思われます。

ただし、ユーザーのリダイレクト時にwindow.locationを使用していることがわかりました。これにより、少なくとも一部のブラウザ（おそらくすべて）が、サーバーに新しいページを要求します。これは、アプリがそれを処理することを許可するのではありません。代わりに、提供されたhistoryプロパティを使用します。このプロパティにはpushメソッドが含まれています。

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

これにより、履歴スタックに新しいエントリが追加されます。定期的なリダイレクトが必要な場合は、代わりに.replaceを使用してください。

希望すると便利です。