如何使用相对 URL 进行重定向？

Question

I am trying to redirect a Sign Out button from a dropdown on my page. When I click on the sign out as of right now it will go to localhost:3000/signout. I have tried:

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

and it will simply replace the URL as localhost:3000/redirect=www.google.com.

I have tried:

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

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

This will redirect to google.com upon loading and won't even let me load my own webpage:

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

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

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);

I expect the results of this to redirect to Google upon clicking on the Sign Out dropdown option.

The actual result is either a redirection to:

localhost:3000/www.google.com

or the Google page is loaded and my localhost:3000 does not.

Answer 1

The idea is to redirect inside your Home component. Take a look at this sample implementation.

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);

The Redirect component is nice for redirecting to an internal route . However, if you're kicking the user out of your app you should use something else like window.location.assign() .

Answer 2

You can try this:

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

Whatever included in the "" is the thing added to the domain. For example export const SIGNOUT= window.location.replace("google"); will become localhost:3000/google.

If you want to use "www.google.com", try to import it as a thing of its own at the beginning of the page, like "import Google from "www.google.com", then use the {Google} element.