Как перенаправить на новую страницу из функции в React?
Прямо сейчас у меня есть эта функция, и я использую ее, чтобы вернуться к входу в систему, а также для проверки сброса значения localStorage, для которого я использую функцию, а с тех пор, как с ее помощью я не могу сбросить значение локального хранилища. Функция ниже: -
logout(){
localStorage.clear();
console.info("cliasdk");
return(
<Redirect to = "/login"/>
)
}
Это выполняется при нажатии на div, но я не могу перейти на страницу / login. Как это сделать?
Ответы 13
logout(){
localStorage.clear();
this.setState({redirect: true})
}
//inside Render
render(){
const {redirect} = this.state;
if (redirect){
return <Redirect push to = "/login"/>
}
}
это единственный способ сделать это? Я пробовал это уже в других местах
вы также можете добавить <Link /> к кнопке выхода.
Вы можете использовать переменную истории в реквизитах или, если у них нет истории в реквизитах, вы можете использовать withRouter HOC (https://reacttraining.com/react-router/web/api/withRouter)
history.push("/login")
или же
history.replace("/login")
Если вы используете пакет react-router-dom, вы можете обернуть свой компонент маршрутизатором, и тогда у вас будет возможность программно перенаправить пользователя, например this.props.history.push('/login').
Например:
import {withRouter} from 'react-router-dom';
class Component extends React.component {
constructor(props){
}
componentDidMount(){
this.props.history.push('/login');
}
}
export default withRouter(Component);
Вы можете изменить маршрут программно с такой историей:
export default class Logout extends Component {
logout = () => {
this.props.history.push("login");
};
render() {
return (
<div>
<h1>Logout</h1>
<button onClick = {this.logout}>Logout</button>
</div>
);
}
}
Если вам нужен localStorage.clear();, просто введите его в функцию выхода. Вы можете увидеть полный (рабочий) пример кода здесь: https://codesandbox.io/s/py8w777kxj
Вам нужно импортировать Redirect из react-router-dom, например:
import { Redirect } from 'react-router-dom';
Это не имеет ничего общего с вопросом, ничто не означает, что OP уже не импортировал. Я знаю, потому что у меня такая же проблема, а не импорт.
вы можете использовать этот пример для перенаправления после рендеринга функции
import React from 'react';
import { Redirect } from 'react-router-dom';
class MyComponent extends React.Component {
state = {
redirect: false
}
setRedirect = () => {
this.setState({
redirect: true
})
}
renderRedirect = () => {
if (this.state.redirect) {
return <Redirect to='/target' />
}
}
render () {
return (
<div>
{this.renderRedirect()}
<button onClick = {this.setRedirect}>Redirect</button>
</div>
)
}
}
Для справки в будущем, если вы не заинтересованы в использовании React Router, вы можете попробовать то же самое, что я использую прямо сейчас, который использует местоположение браузера (URL):
logout(){
// stuff...
location.href = "/login/"
}
Если вы пытаетесь выйти из приложения React (которое использует шаблон URL /#/page) через функцию очистки локального хранилища / перенаправления, попробуйте использовать go:
import { createHashHistory } from "history";
const history = createHashHistory();
history.go("/login");
go загружает конкретный URL из списка истории, его можно использовать для возврата в историю, а также для продолжения, в этом случае «вперед» будет использовать /login и абсолютный путь для перенаправления.
Обновлять
На React Router 6 вы можете использовать useNavigate для программной навигации.
Попробуй это
import React from "react";
const createHistory = require("history").createBrowserHistory;
class Logout extends React.Component {
constructor(props) {
super(props);
let history = createHistory();
history.push("/login");
let pathUrl = window.location.href;
window.location.href = pathUrl;
}
render() {
return (
<div>
</div>
);
}
}
export default Logout;
очень хорошее решение для структуры «экспорт функций по умолчанию». Большое спасибо :)
Со всеми предыдущими ответами я опишу здесь этот вариант использования:
on `/login` page, I would like to go to `/` when login is OK:
Добавить импорт:
import { Redirect } from 'react-router-dom';
Добавьте в состояние вашего компонента по умолчанию перенаправление на false:
state = {
redirect: false,
}
Добавьте в свою бизнес-логику (например, onLoginOk()) изменение состояния перенаправления
this.setState({ redirect: true })
Добавьте где-нибудь в корневой элемент render:
{ this.state.redirect ? (<Redirect push to = "/"/>) : null }
Вот и все.
Как насчет функциональности? Вы не отвечаете на вопрос. Вопрос по функциям, а не по классам, лол?
@EdisonPebojot, вы также можете добавить свою собственную бизнес-логику, используя мой образец: в дополнение к обновлению состояния в вашей функции «onLoginOk» вы можете добавить другие директивы. С другой стороны, вы могли бы избежать использования промежуточного состояния, вызвав напрямую window.location.href= '/';.
В React router 6 перенаправление выглядит так:
const navigate = useNavigate();
const goToLoginPage = () => navigate('/login');
Весь код можно увидеть здесь: https://github.com/anmk/redirect/blob/redirect/src/App.js
Вы также можете написать компонент для этого: https://github.com/anmk/redirect/tree/redirect_to_component
Это самый простой вариант, если вы не хотите иметь дело с response-router-dom.
Вот пример, написанный в функциональных компонентах React
const Page = () => {
const redirect = () => {
window.location.href = '/anotherPagePath'
}
return (
<button onClick = {redirect}>go to another page</button>
)
}
import React from "react"
import { useHistory } from "react-router-dom";
export const Component = ( props ) => {
const history = useHistory()
const handler = () => {
//Redirect to another route
history.push("/route-link")
}
}
Может это то, что вы ищете.