嗨，我是新來的反應，并面臨反應路由器的問題。實際上我在反應路由器dom中使用useNavigate進行導航，一切正常，但我的問題是假設最初我在第一頁，然后在到達第二頁然后從第二頁到第三頁使用useNavigate。現在當我重繪 頁面時一切再次從第 1 頁開始，但是，我想要的是，如果我在第 3 頁，那么重繪 必須在第 3 頁，有什么方法可以實作它。
例如我正在使用兩個頁面（我的目標是如果我在重繪 時在第二頁上，我必須在第二頁上）但是對于當前情況，瀏覽器從第一頁開始
我正在這樣寫我的第一頁
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.log(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.log(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.log("loaded");
this.getUnverifiedArticles();
}
getUnverifiedArticles() {
let data = [];
let cnt = 0;
let temp = [];
axios
.get(
`http://localhost:4000/app/panel/articleverification/getunverifiedarticles`,
data
)
.then((res) => {
console.log(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.log('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;
uj5u.com熱心網友回復：
據我所知，在導航到其中一個嵌套路由并重新加載頁面后，應用程式重新加載并authorized重置狀態，并且子路由組件檢查此狀態并強制重定向回來。
持久化和初始化本地存盤的authorized狀態。
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.log('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>
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/457640.html