kylefang/examples
1
0
Fork 0
mirror of https://github.com/zhigang1992/examples.git synced 2026-01-12 09:03:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

Move react-router demo assets

Browse Source
This commit is contained in:
Evan Bacon
2020-06-25 15:18:52 -07:00
parent d89d2590bd
commit 8cce66b8ed
4 changed files with 9 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
with-react-router/.gh-assets/native-example.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 272 KiB

BIN
with-react-router/.gh-assets/page-not-found.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 46 KiB

BIN
with-react-router/.gh-assets/web-example.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 138 KiB

20
with-react-router/README.md
View File

@@ -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)