Menu
I am using react-router and have put it in it, but I noticed that when I start at the landing page and go through all my routes it works. If I just type in a path url I get a 404.
Am I guessing this has something to do with the server not knowing how to pass it off to my client routes?
I found this post but I am a bit confused with the answers as some say to update the web.config file but I don't have one as it is a Reactjs only.
Edit
Here is what I have now for my rewrite
I am now getting a white page when I try to navigate to a URL that is not the index page.
When I look at my console. I see
Uncaught SyntaxError: Unexpected token <
which goes to main.js and complains about this "<!DOCTYPE html>" it almost seems as my index.html was merged into the javascript file.
418
To enable routing in our React app, we first need to import BrowserRouter from react-router-dom . This should hold everything in our app where routing is needed. That means, if we need routing in our entire app, we must wrap our higher component with BrowserRouter .
React Router uses dynamic routing to ensure that routing is achieved as it is requested by the user. This also means that all the required components are also rendered without any flashes of white screen or page reload.
React Router is used to define multiple routes in the application. When a user types a specific URL into the browser, and if this URL path matches any 'route' inside the router file, the user will be redirected to that particular route.
The key to getting React-Router to work with IIS is to setup URL Rewrite rules. After looking at how some others have setup AngularJS SPA apps with IIS, I have come up with the following solution.
Download and install URL Rewrite on your server (development and production)
Setup rule to catch any url routes that ARE NOT files and ARE NOT directories. Optionally, you can negate any actual directories that you want serve regularly. More info can be found here on Microsoft's Documentation
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="ReactRouter Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(docs)" negate="true" />
</conditions>
<action type="Rewrite" url="index.html" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
In your base html page (index.html) add a tag with a href attribute to your app.
<base href='/path/to/my/app'/>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
