I want to redirect my reactjs page to regular .html page?

Question

I want redirect my reactjs page to regular html page on pressing click me like link button.

Here's my code:

App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import './App.css';
// import DoctorImg from './doctor.jpg';

class App extends Component {
  render() {
    return (
      <Router>
      <div>
        <Link to="/Users/yashchoksi/Documents/route/src/normal_redirect.html">Press</Link>
      <Switch>
        <Route exact path="/Users/yashchoksi/Documents/route/src/normal_redirect.html"/>
      </Switch>
    </div>
    </Router>
    );
  }
}

export default App;

Other file is

normal_redirect.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Check this.</title>
  </head>
  <body>
    <p>This is redirected page.</p>
  </body>
</html>

score 10 · Answer 1 · edited Jun 19 '22 at 14:40

10

To statically link to a different page, simply use the standard HTML anchor tag:

<a href="normal_redirect.html">Redirect to Html page</a>

When the user clicks on the link, it's a normal page navigation to the href value of the tag.

To dynamically send the user to another page, use <Route> component's render property:

<Route exact path="/normal_redirect" render={() => {window.location.href="normal_redirect.html"}} />

Essentially, use the Route component's render property to tell the browser to navigate to a different page: https://reacttraining.com/react-router/web/api/Route

Try this:

class App extends Component {
  render() {
    return (
      <div>
        <a href="/Users/yashchoksi/Documents/route/src/normal_redirect.html">Press</a>
      </div>);
  }
}

Please notice how I've removed the Router, Route, Switch, and Link components from the code. For a normal link, you don't need any of them.

edited Jun 19 '22 at 14:40

Amal Thundiyil

307
1
4
9

answered Feb 21 '18 at 04:59

Arash Motamedi

9,284
5
34
43

Please check out the updated answer and try the second suggestion. – Arash Motamedi Feb 21 '18 at 05:02
Do you want me to add both of the answer? – Yash Choksi Feb 21 '18 at 05:03
No, how do you want the user to navigate to a different url? If you want the user to click on a link and navigate, then use ``. Otherwise, in case of dynamic navigation, use the `` component and its `render` property. – Arash Motamedi Feb 21 '18 at 05:07
1

I want the user to click on link and navigate, and in respect of that I tried your first answer but it updates url but not content of page! – Yash Choksi Feb 21 '18 at 05:08
I can put screenshot if you required. – Yash Choksi Feb 21 '18 at 05:09

score 5 · Answer 2 · edited Dec 08 '20 at 05:08

5

Your HTML must be in your public folder, in my case terminos.html

In your App.js, add this code:

    <Route exact path="/terminos" render={() => {window.location.href="terminos.html"}} />

If you want to add an anchor, like <a/>, add this code:

     <a target="_blank" href={process.env.PUBLIC_URL + "terminos.html"} > terminos</a>

edited Dec 08 '20 at 05:08

Kirby

15,127
10
89
104

answered Dec 07 '20 at 20:43

Israel Santiago Pancca M.

51
1
1

Marcio J · Answer 3 · 2023-07-27T14:36:24.920

0

As the render property is not available in React Router v5.1 (and v6), you can have a element that does the redirection:

const RedirectSite = () => {
  window.location.href = "/mypage.html";
  return <></>;
};

And then use it like this:

<Route path="/" element={<RedirectSite />} />

Reference: https://reactrouter.com/en/main/upgrading/v5

edited Jul 27 '23 at 14:36

answered Jul 27 '23 at 13:29

Marcio J

673
7
17

I want to redirect my reactjs page to regular .html page?

3 Answers3

Linked