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 in Java-Script by kartik
• 11,890 points
108 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 by Niroj
• 23,950 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 in Java-Script by Niroj
• 23,950 points
40 views
0 votes
1 answer

Error: listen EADDRINUSE while using nodejs?

Hello kartik, Two possible solutions for this: Free currently ...READ MORE

answered Apr 24 in Java-Script by Niroj
• 23,950 points
42 views
0 votes
1 answer

Error: Unexpected token import in nodejs

Hello, Unfortunately, Node.js doesn't support ES6's import yet. To accomplish what ...READ MORE

answered Apr 24 in Java-Script by Niroj
• 23,950 points
293 views
0 votes
1 answer

Error: Use of const in strict mode

Hello, If this is happening in nodejs, it ...READ MORE

answered Apr 24 in Java-Script by Niroj
• 23,950 points
23 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 in PHP by Niroj
• 23,950 points
71 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 in Java-Script by Niroj
• 23,950 points
250 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 in Java-Script by Niroj
• 23,950 points
41 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 in Java-Script by Niroj
• 23,950 points
23 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 in Java-Script by Niroj
• 23,950 points
98 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 in Java-Script by Niroj
• 23,950 points
31 views