Direct Link to React Netlify Function app Showing as Not Found

Question

I am building a React - Netlify Function App. The app is using react-router-dom to route to pages.

import React from 'react';
import {
  Switch,
  BrowserRouter as Router,
  Route,
  Link,
  Redirect,
  withRouter,
  browserHistory
} from 'react-router-dom';
...
<Router history={browserHistory}>
  <IdentityContextProvider url={url}>
    <Page>
      <Switch>
        <Route exact path="/" component={withTracker(HomePage)} />
        <Route exact path="/demo" component={withTracker(Demo)} />

However, when users type the URL directly into the browser address bar to go to the link then it shows as not found. Does that mean I also need Server-side rendering? What is the quickest way to add Server-Side Rendering to the existing app?

We plan to point different Ads to different page links of the website.

Answer 1

我会制作一个 DemoPage 组件并将反应路由器指向所述页面，然后让它加载 withTracker(Demo) 并在页面自动加载后添加更多逻辑。

Answer 2

To solve this problem you need to create a _redirects file , it's a file that tells Netlify where it should redirect the clients based on the address or route that they are attempting to request.

1- Create a file named _redirects inside of your public folder, there is no file extension.

2- The code for the file :

/*    /index.html   200

3-Rebuild and deploy your project.

Read this article to help you more : https://www.edwardbeazer.com/routing-react-apps-hosted-on-netlify/