реагировать js Перенаправление на другой URL в приложении

Question

Я использую реагирование js и новое при изучении некоторых вызовов. У меня возникли проблемы с получением функции onclick для перенаправления на другой URL в приложении.

У меня есть следующий код

import {Redirect} из'act-router-dom '

в функции

redirect() {

return <Redirect to="myComponent/subComponent"/>

}

Я установил точку останова, и ничего не происходит

Я также попробовал следующее

redirect() {
  const myUrl='/myComponent/subComponnent'
  this.props.history.push(`${myUrl}`)
}

, но история равна нулю

любая помощь очень ценится. спасибо

Answer 1

Если вам нужно перенаправить изнутри компонента / функции, вы можете использовать функцию истории следующим образом:

const createHistory = require("history").createBrowserHistory;

Redirectpath = () => {
    let history = createHistory();
    history.push("/login");
    let pathUrl = window.location.href;
    window.location.href = pathUrl;   
}

В противном случае, если вы создаете промежуточное программное обеспечение для защиты своих маршрутов и хотите перенаправить на страницу входа на ошибка или несанкционированный доступ, тогда вы можете:

import React from "react";
import {
  BrowserRouter as Router,
  Switch,
  Redirect,
  Route,
} from "react-router-dom";
import Login from "./components/pages/Login";
import Home from "./components/pages/Home";

function App() {
  const checkAuth = () => {
    try {
      // To be replaced with you condition
      if (false) {
        return false;
      }

    } catch (e) {
      return false;
    }

    return true;
  }

  const AuthRoute = ({ component: Component, ...rest }) => (
    <Route {...rest} render={props => (
      checkAuth() ? (
        <Component {...props} />
      ) : (
          <Redirect to={{ pathname: '/login' }} />
        )
    )} />
  )

  return (
    <div className="row">
      <Router>
        <Switch>
          <AuthRoute exact path="/" component={Home} />
          <Route exact path="/login" component={Login} />
        </Switch>
      </Router>
    </div>
  );
}

export default App;

Answer 2

используйте BrowserRouter в вашем индексе. js файл.

Для примера

import {BrowserRouter} from 'react-router-dom'
 ReactDOM.render(
    <BrowserRouter basename={baseUrl}>
      <ChildComponent />
    </BrowserRouter>,
    document.querySelector('#root')
  );

Теперь реквизит истории работает хорошо.