Question

我正在尝试从页面上的下拉菜单重定向“退出”按钮。当我现在单击退出时，它将转到localhost：3000 / signout。我尝试过：

export const SIGNOUT="redirect=www.google.com";

，它将简单地将URL替换为localhost：3000 / redirect = www.google.com。

我尝试过：

<Route exact path={SIGNOUT}>
    <Redirect to={www.google.com}/>
</Route>

export const SIGNOUT="www.google.com";

这将在加载后重定向到google.com，甚至不允许我加载自己的网页：

export const SIGNOUT= window.location.replace("http://www.google.com");

urlLists.js

export const SIGNOUT= "www.google.com";

App.js

import {SIGNOUT} from "./utils/urlLists";

class App extends Component {
    render() {
        const {location} = this.props
        return (
            <Switch>
                <Route exact path={SIGNOUT}>
                    <Redirect to={HOME}/>
                </Route>
            </Switch>
        );
    }
}

export default withRouter(App);

我希望单击“退出”下拉选项后，此操作的结果将重定向到Google。

实际结果是重定向到：

localhost:3000/www.google.com

或Google页面已加载，而我的localhost：3000未加载。

Answer 1

这个想法是在Home组件的内部中重定向。看一下这个示例实现。

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function Home() {
  return (
    <div className="App">
      <h1>Hello World</h1>
      <button
        name="sign-out"
        onClick={() => {
          // sign user out here
          window.location.assign("www.google.com");
        }}
      >
        Sign Out
      </button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<Home />, rootElement);

Redirect组件非常适合重定向到内部路由。但是，如果要将用户赶出您的应用程序，则应使用window.location.assign()之类的其他名称。

Answer 2

您可以尝试以下方法：

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

const ProtectedComponent = () => {
 if (authFails)
    return <Redirect to='redirect=www.google.com'  />
}
return <div> My Protected Component </div>
}

Answer 3

添加到域中的东西都包含在“”中。例如export const SIGNOUT = window.location.replace（“ google”）;将变为localhost：3000 / google。

如果您想使用“ www.google.com”，请尝试在页面开头将其作为自己的内容导入，例如“从“ www.google.com导入Google”，然后使用{ Google}元素。

如何使用相对URL重定向？

3 个答案: