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,520 points
6,537 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.

hope it helps!

If you need to know more about React, Its recommended to join React course today.

Thank You!!

answered Apr 27, 2020 by Niroj
• 82,800 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,800 points
6,605 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,800 points
22,893 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,800 points
1,351 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,800 points
547 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,800 points
2,894 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,800 points
164 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,800 points
229 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,800 points
3,506 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,800 points
6,262 views