diff --git a/with-react-router/.gh-assets/native-example.png b/with-react-router/.gh-assets/native-example.png deleted file mode 100644 index 21b9cc7..0000000 Binary files a/with-react-router/.gh-assets/native-example.png and /dev/null differ diff --git a/with-react-router/.gh-assets/page-not-found.png b/with-react-router/.gh-assets/page-not-found.png deleted file mode 100644 index 250afcb..0000000 Binary files a/with-react-router/.gh-assets/page-not-found.png and /dev/null differ diff --git a/with-react-router/.gh-assets/web-example.png b/with-react-router/.gh-assets/web-example.png deleted file mode 100644 index 27b0a8b..0000000 Binary files a/with-react-router/.gh-assets/web-example.png and /dev/null differ diff --git a/with-react-router/README.md b/with-react-router/README.md index 0dc1e55..5805df5 100644 --- a/with-react-router/README.md +++ b/with-react-router/README.md @@ -18,32 +18,30 @@ This demo shows you how to setup your universal application to switch between we - Now you can use these files to create your universal routes! [Basic Example](App.js) - [Deployed example](https://5e20d26f3f285b0766a74be2--stupefied-perlman-ca9443.netlify.com/about) -![react-router-native-expo-web-example](.gh-assets/native-example.png "React Router native expo web example") -![react-router-dom-expo-web-example](.gh-assets/web-example.png "React Router dom expo web example") - +![react-router-native-expo-web-example](https://i.imgur.com/XSCAX19.png "React Router native expo web example") +![react-router-dom-expo-web-example](https://i.imgur.com/xl1yYmm.png "React Router dom expo web example") ### Deploying to Netlify You may find get the following error when visiting URLs other than '/' on when your single page application (SPA) is deployed to Netlify: -![netlify-error](.gh-assets/page-not-found.png "Netlify: Page Not Found error") +![netlify-error](https://i.imgur.com/BKFNGzH.png "Netlify: Page Not Found error") > **Page Not Found** > Looks like you've followed a broken link or entered a URL that doesn't exist on this site. The problem is that `react-router` creates the routes on the client side so when you visit pages other than the root (ex: `coolproject.netlify.com/about`), Netlify won't know how to redirect the route. - Luckily the solution for this is simple! We can use the [redirects API](https://www.netlify.com/docs/redirects/) provided by Netlify. - Create a [`web/_redirects`](web/_redirects) to redirect all routes to the `index.html`: - ``` - /* /index.html 200 - ``` - - Creating files in the `web/` folder will copy them to the build folder (`web-build/`). Think of this like `public/` in Create React App projects. + ``` + /* /index.html 200 + ``` + - Creating files in the `web/` folder will copy them to the build folder (`web-build/`). Think of this like `public/` in Create React App projects. - Now simply rebuild (`expo build:web`) and deploy your web app (`netlify deploy --dir web-build`)! #### Example -- ❌ Example deploying [**without** _redirects](https://5e20d1844d610eee07f5c10e--stupefied-perlman-ca9443.netlify.com/about) -- ✅ Example deploying [**with** _redirects](https://5e20d26f3f285b0766a74be2--stupefied-perlman-ca9443.netlify.com/about) +- ❌ Example deploying [**without** \_redirects](https://5e20d1844d610eee07f5c10e--stupefied-perlman-ca9443.netlify.com/about) +- ✅ Example deploying [**with** \_redirects](https://5e20d26f3f285b0766a74be2--stupefied-perlman-ca9443.netlify.com/about)