Привет, я новичок в реагировании и столкнулся с проблемой в реагирующем маршрутизаторе. На самом деле я использую useNavigate в React Router dom для навигации, и все работает нормально, но моя проблема в том, что сначала я нахожусь на первой странице, а затем использую useNavigate, чтобы перейти на вторую страницу, а затем со второй страницы на страницу 3. Теперь, когда я обновляю страницу, все снова начинает работу со страницы 1, но я хочу, чтобы если я был на странице 3, то при обновлении должен быть на странице 3, есть ли способ добиться этого.
например, я использую две страницы (моя цель - если я нахожусь на 2-й странице при обновлении, я должен быть на 2-й странице), но в текущей ситуации браузер начинается с первой страницы
я пишу свою первую страницу так
import react from "react";
import "../../../../css/panel/articleverificationpanel/topmostTray.css";
import axios from "axios";
import { useNavigate } from 'react-router-dom'
class MainLoginAreaForPanel extends react.Component {
goButtonClicked =() => {
try {
const userId = document.getElementById("userId").value;
const password = document.getElementById("password").value;
const securityKey = document.getElementById("securityKey").value;
console.info(userId, password, securityKey);
const data = {
userId,
password,
securityKey,
};
axios
.post(
`http://localhost:4000/app/panel/articleverification/signin`,
data
)
.then((res) => {
// means file has been uploaded
if (res.data.success === 1) {
console.info(this.props)
this.props.authorizeUser(true,{})
this.props.navigation('/panel/articleverification/homepage',{replace:true})
} else {
throw new Error('Sorry could not verify you');
}
})
.catch((error) => {
alert(error.message);
});
} catch (error) {
alert(error.message);
}
}
render() {
return (
<react.Fragment>
<div id = "mainLoginPanelArea">
<label htmlFor = "userId" className = "children">
User id:
</label>
{" "}
<input type = "text" id = "userId" name = "userId" className = "children" />
<br />
<br />
<label htmlFor = "password">Password:</label>
{" "}
<input type = "text" id = "password" name = "password" />
<br />
<br />
<label htmlFor = "securityKey">Security Key:</label>
{" "}
<input type = "text" id = "securityKey" name = "securityKey" />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<button className = "btn" onClick = {this.goButtonClicked}>
GO
</button>
</div>
</react.Fragment>
);
}
}
// Wrap and export
export default function(props) {
const navigation = useNavigate();
return <MainLoginAreaForPanel {...props} navigation = {navigation} />;
}
вот как я пишу свою вторую страницу
import react from "react";
import TopmostTrayForPanel from "./topmostTray";
import CardForPanel from "./cardForPanel";
import {Navigate,useNavigate} from 'react-router-dom'
import axios from "axios";
class HomePageForArticalVerificationPanel extends react.Component {
state = {
data: [],
};
openArticle = (articleId) => {
this.props.navigation('/panel/articleverification/articlepage',{replace:true,state:
{articleId:articleId}
})
}
componentDidMount() {
console.info("loaded");
this.getUnverifiedArticles();
}
getUnverifiedArticles() {
let data = [];
let cnt = 0;
let temp = [];
axios
.get(
`http://localhost:4000/app/panel/articleverification/getunverifiedarticles`,
data
)
.then((res) => {
console.info(res)
if (res.data.success === 1) {
const articles = res.data.data.articles
for (let i = 0; i < articles.length; i++) {
if (cnt > 2) {
data.push(<div className = "row" key = {`extra${i}`}>{temp}</div>);
cnt = 0;
temp = [];
}
if (cnt <= 2) {
temp.push(
<div className = "col-sm" key = {i}>
<CardForPanel title = {articles[i].title} tags = {articles[i].tags} aid = {articles[i].aid} openArticle = {this.openArticle}></CardForPanel>
</div>
);
cnt++;
}
}
if (temp.length !=0){
data.push(<div className = "row" key = {`last one`}>{temp}</div>);
}
this.setState({
data: data,
});
} else {
throw new Error('Sorry could not verify you');
}
})
.catch((error) => {
alert(error.message);
});
}
render() {
if (this.props.authorized) {
return (
<div className = "parent_container">
<TopmostTrayForPanel></TopmostTrayForPanel>
<div className = "container">{this.state.data}</div>
</div>
);
} else {
return (
<Navigate to='/panel/articleverification' />
)
}
}
}
// Wrap and export
export default function(props) {
const navigation = useNavigate();
return <HomePageForArticalVerificationPanel {...props} navigation = {navigation} />;
}
и ниже мой код маршрутизации
import React from "react";
import {Routes,Route} from 'react-router-dom'
import EditorPage from './components/editor/classbased/editorPage'
import LoginPageForArticalVerificationPanel from './components/panel/articleverficationpanel/classbased/loginPage'
import HomePageForArticalVerificationPanel from './components/panel/articleverficationpanel/classbased/homePage'
import ArticlePageForArticalVerificationPanel from './components/panel/articleverficationpanel/classbased/articlePage'
class App extends React.Component {
state = {
authorised:false,
extras:{}
}
authorizeUser = (authorizeState,extras) => {
console.info('called 1')
this.setState({
authorised:authorizeState,
extras:extras
})
}
render() {
return (
<>
<Routes>
<Route path='/editor' element = {<EditorPage />} />
<Route path='/panel/articleverification' element = {<LoginPageForArticalVerificationPanel authorizeUser = {this.authorizeUser}/>} />
<Route path='/panel/articleverification/homepage' element = {<HomePageForArticalVerificationPanel authorized = {this.state.authorised}/>} />
<Route path='/panel/articleverification/articlepage' element = {<ArticlePageForArticalVerificationPanel authorized = {this.state.authorised}/>} />
</Routes>
</>
);
}
}
export default App;
Эти два компонента визуализируются какими-либо Route
компонентами? У вас есть какие-то проверки, которые происходят, когда приложение монтируется, которое куда-то перенаправляет? Можем ли мы также увидеть код маршрутизации/навигации?
@DrewReese также добавил код маршрутизации
да, они оба отображаются компонентом маршрута
Является ли путь '/panel/articleverification'
«первой страницей», а путь '/panel/articleverification/homepage'
или '/panel/articleverification/articlepage'
«второй» и/или «третьей» страницей? Вы находитесь на одном из этих вложенных путей и обновляете страницу, и вас перенаправляют обратно на '/panel/articleverification'
? Я подозреваю, что состояние authorised
сброшено, и компонент страницы, на котором вы находитесь, перенаправляется обратно.
@DrewReese, вы правильно догадываетесь о порядке страниц, и вы также правы в том, что после обновления я перенаправляюсь обратно на «/panel/articleverification», но не могли бы вы сказать мне, как я могу предотвратить сброс состояния авторизации при обновлении страницы?
Насколько я могу судить, после перехода к одному из вложенных маршрутов и перезагрузки страницы приложение перезагружается, и состояние authorized
сбрасывается, а дочерний компонент маршрута проверяет это состояние и обязательно перенаправляет обратно.
Сохраняйте и инициализируйте состояние authorized
в/из localStorage.
class App extends React.Component {
state = {
// Read initial state from localStorage, provide fallback
authorized: JSON.parse(localStorage.getItem("authorized")) ?? false,
extras: {}
}
componentDidUpdate(prevProps, prevState) {
// Persist authorized state changes to localStorage
if (prevState.authroized !== this.state.authorized) {
localStorage.setItem("authorized", JSON.stringify(authorized));
}
}
authorizeUser = (authorizeState, extras) => {
console.info('called 1');
this.setState({
authorized: authorizeState,
extras: extras
})
}
render() {
return (
<Routes>
<Route path='/editor' element = {<EditorPage />} />
<Route
path='/panel/articleverification'
element = {(
<LoginPageForArticalVerificationPanel
authorizeUser = {this.authorizeUser}
/>
)}
/>
<Route
path='/panel/articleverification/homepage'
element = {(
<HomePageForArticalVerificationPanel
authorized = {this.state.authorized}
/>
)}
/>
<Route
path='/panel/articleverification/articlepage'
element = {(
<ArticlePageForArticalVerificationPanel
authorized = {this.state.authorized}
/>
)}
/>
</Routes>
);
}
}
Мы не можем помочь диагностировать или отладить код, который мы не видим. Пожалуйста, отредактируйте свой вопрос, включив в него минимальный, полный и воспроизводимый пример кода, чтобы мы могли видеть, что делает код, и, возможно, сказать, почему что-то «сбрасывается» при обновлении страницы.