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>

Arash Motamedi · Accepted Answer · 2022-06-19 14:40:27Z

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, 2022 at 14:40

user17297103

answered Feb 21, 2018 at 4:59

Arash Motamedi

10.8k7 gold badges38 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Arash Motamedi Over a year ago

Please check out the updated answer and try the second suggestion.

Yash Choksi Over a year ago

Do you want me to add both of the answer?

Arash Motamedi Over a year ago

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 <a href...>. Otherwise, in case of dynamic navigation, use the <Route> component and its render property.

Yash Choksi Over a year ago

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 Over a year ago

I can put screenshot if you required.

Kirby · Accepted Answer · 2020-12-08 05:08:18Z

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 8, 2020 at 5:08

Kirby

16k11 gold badges97 silver badges110 bronze badges

answered Dec 7, 2020 at 20:43

Israel Santiago Pancca M.

511 silver badge1 bronze badge

Comments

Marcio J · Accepted Answer · 2023-07-27 14:36:24Z

2

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, 2023 at 14:36

answered Jul 27, 2023 at 13:29

Marcio J

7801 gold badge7 silver badges19 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related