Question

我希望将我的reactjs页面重定向到常规的html页面，点击我点击链接按钮。

这是我的代码：

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;

其他档案是

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>

Answer 1

要静态链接到其他页面，只需使用标准HTML锚标记：

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

当用户点击该链接时，它是标记的href值的正常页面导航。

要动态地将用户发送到其他网页，请使用<Route>组件的render属性：

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

基本上，使用Route组件的render属性告诉浏览器导航到其他页面：https://reacttraining.com/react-router/web/api/Route

试试这个：

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

请注意我是如何从代码中删除Router，Route，Switch和Link组件的。对于普通链接，您不需要任何链接。

Answer 2

您的HTML必须位于您的公用文件夹中，在我的情况下为terminos.html

在您的App.js中，添加以下代码：

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

如果要添加锚点，例如<a/>，请添加以下代码：

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

我想将我的reactjs页面重定向到常规.html页面？

2 个答案: