时间戳

首页 > 解决方案 > 使用 React 重定向到外部链接

javascript - 使用 React 重定向到外部链接

问题描述

我找到了这个重定向到外部链接的解决方案，它适用于我的一个页面。

但是对于不同的页面，它不再起作用，我不知道为什么。

redirect.jsx：

import React from "react";
import { BrowserRouter, Route } from 'react-router-dom'

export default class Redirect extends React.Component {
    render() {
        return (
            <Route path='/hello' component={() => {
            window.location.href = "example.com";
            return null;}}/>
        );
    }
}

test.jsx：

import React from "react";
import ReactDOM from "react-dom";
import {BrowserRouter} from 'react-router-dom'
import MainExport from './components/redirect.jsx';

ReactDOM.render(
    <BrowserRouter>
        <div>
            <MainExport />
        </div>
    </BrowserRouter>, document.getElementById("content")
);

test.html：

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div className="App">
        <div id="content" />
    <div/>
    <script src="dist/bundle/test.bundle.js" type="text/javascript"></script>
  </body>
</html>

当我加载此页面时，我希望它重定向到 URL“/hello”并显示来自“example.com”的页面。

相反，它什么也不做。

我究竟做错了什么？

编辑：一些答案很有帮助，但还没有一个有效。

我发现使用该Redirect组件呈现并执行重定向，但以某种方式执行它以使我的 Flask 服务器实际上不提供文件。我所看到的只是一个空白屏幕。

将名称更改为MyRedirect也没有使其工作。

使用render而component不是似乎也没有影响。

重定向仍未发生。

（我在 JS 控制台或服务器端也没有看到任何错误消息。）

标签： javascriptreactjswebpack

解决方案

如果您使用 react-router，则无需创建自己的重定向组件。他们已经为你做了一个。

您只需要导入它并渲染它以进行重定向。

import React from 'react'
import { Redirect } from 'react-router-dom'

export default () => <Redirect to="/hello" />

推荐阅读