Error React-router urls don t work when refreshing or writing manually

0 votes

Using React-router and it works fine while I'm clicking on link buttons, but when I refresh my webpage it does not load what I want.

For instance, I am in localhost/joblist and everything is fine because I arrived here pressing a link. But If I refresh the webpage I get:

Cannot GET /joblist

By default, it didn't work like this. Initially I had my URL as localhost/#/ and localhost/#/joblist and they worked perfectly fine. But I don't like this kind of URL, so trying to erase that #, I wrote:

Router.run(routes, Router.HistoryLocation, function (Handler) {
 React.render(<Handler/>, document.body);
});

This problem does not happen with localhost/, this one always returns what I want.

Apr 27, 2020 in Java-Script by kartik
• 37,490 points
5,750 views

1 answer to this question.

0 votes

Hello @kartik,

You can change your .htaccess file and insert this:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-l
  RewriteRule . /index.html [L]
</IfModule>

I am using react: "^16.12.0" and react-router: "^5.1.2" This method is the Catch-all and is probably the easiest way to get you started.

Thank You!!

answered Apr 27, 2020 by Niroj
• 82,680 points

Related Questions In Java-Script

0 votes
1 answer

How to get rid of underline for Link component of React Router?

Hello, If you are using styled-components, you could do ...READ MORE

answered May 18, 2020 in Java-Script by Niroj
• 82,680 points
5,166 views
0 votes
1 answer

How to find event listeners on a DOM node when debugging or from the JavaScript code?

Hii @kartik, It is possible to list all ...READ MORE

answered Jun 8, 2020 in Java-Script by Niroj
• 82,680 points
9,836 views
0 votes
1 answer

Error:“Cross origin requests are only supported for HTTP”when loading a local file

Hii @kartik, You are loading the model using ...READ MORE

answered Jun 8, 2020 in Java-Script by Niroj
• 82,680 points
1,052 views
0 votes
1 answer

What are the vulnerability related to PHP Form?

Hii, The $_SERVER["PHP_SELF"] variable can be used by ...READ MORE

answered Feb 13, 2020 in PHP by Niroj
• 82,680 points
329 views
+1 vote
1 answer

How can we send message multiple time to a specific person or group in whatsapp using loop?

Hii @kartik,  This is simple task to send single ...READ MORE

answered Feb 28, 2020 in Java-Script by Niroj
• 82,680 points
1,672 views
0 votes
1 answer

How can we parse JSON using Node.js?

Hello @kartik, You can simply use JSON.parse. The definition of ...READ MORE

answered Apr 24, 2020 in Java-Script by Niroj
• 82,680 points
131 views
0 votes
1 answer

How do I turn a string to a json in Node.js?

Hello Kartik, Use the JSON function  JSON.parse(theString) ...READ MORE

answered Apr 24, 2020 in Java-Script by Niroj
• 82,680 points
162 views
0 votes
1 answer

How to use React Router with Laravel?

Hii Kartik, Create a route that maps everything ...READ MORE

answered Apr 29, 2020 in Java-Script by Niroj
• 82,680 points
2,794 views
0 votes
1 answer

How to use Redirect in the new react-router-dom of Reactjs?

Hello, To navigate to another component you can ...READ MORE

answered May 18, 2020 in Java-Script by Niroj
• 82,680 points
5,363 views