Как перенаправить, используя относительный URL?

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

Все, что включено в "" - это то, что добавляется в домен.Например, экспорт const SIGNOUT = window.location.replace ("google");станет localhost: 3000 / google.

Если вы хотите использовать "www.google.com", попробуйте импортировать его как отдельную вещь в начале страницы, например "импортировать Google из".www.google.com ", затем используйте элемент {Google}.

Answer 3

Вы можете попробовать это:

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>
}