node.js - 浏览器重新加载:不返回所选页面,转到默认主页 - ReactJs
问题描述
我是使用 ReactJS 并一点一点学习它的新手。我有 3 页homepage
:contacts
和moviesDetails
。当我穿越contacts
或moviesDetails
点击浏览器的重新加载时,它会让我回到homepage
我不想要的地方。我希望它留在我所在的同一页面上。
如果我在contacts
页面中,并点击浏览器的重新加载,我希望它留在contacts
页面上。我不想让它去homepage
。
我不知道如何将打开页面的路径存储在localStorage
. 我在这里需要帮助,因为我无法弄清楚我哪里出错了。
以下是App.js
代码。
import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Homepage from "./homepage/Homepage";
import Contacts from "./contacts/Contacts";
import PrivateRoute from "./private-route/PrivateRoute";
import MoviesDetails from "./MoviesDetails/MoviesDetails";
class App extends Component {
render() {
return (
<Router>
<div className="App">
<Switch>
<PrivateRoute exact path="/homepage" component={Homepage} />
<PrivateRoute exact path="/contacts" component={Contacts} />
<PrivateRoute exact path="/moviesDetails" component={MoviesDetails} />
</Switch>
</div>
</Router>
);
}
}
export default App;
以下是contacts.js
代码:(正在导入所有相应的组件)
import React, { Component } from "react";
import { connect } from "react-redux";
import Container from '@material-ui/core/Container';
import { changeHeaderName} from '../../actions/homepageActions';
class contacts extends Component {
constructor() {
super();
this.state = {
data:"",
value: 0,
date: "",
errorList: {}
};
}
componentDidMount() {
this.props.header("Contacts");
}
render() {
const { classes } = this.props;
return (
<Container>
<TabPanel value={this.state.value}>
<Grid container
justify="flex-start"
alignItems="center"
>
<Grid xs={6}>
<Typography>
(Names here)
</Typography>
</Grid>
</Grid>
<Grid xs={3}>
<Typography>
Contacts
</Typography>
</Grid>
<Grid xs={5}>
<Typography>
(All the contacts are listed here)
</Typography>
</Grid>
</TabPanel>
</Container>
);
}
}
const mapStateToProps = state => {
return {mainUser: state.auth.mainUser}
};
export default connect(mapStateToProps, {header})(configurations);
以下是store.js
代码:
import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";
const initialState = {};
const store = createStore(
rootReducer,
initialState,
compose(
applyMiddleware(thunk),
(b&&a()) ||compose)
);
export default store;
上面store
导出的用于index.js
文件中。
鉴于上面的代码,我不希望我加载的页面回到homepage
. 我想保持在同一页面上。浏览器重新加载让我回到“/homepage”而不是“/contacts”。浏览器重新加载让我回到“/homepage”而不是“/moviesDetails”。
我在这里没有使用任何钩子。所以我不希望我的代码陷入困境。只是一个简单的react.js
代码。
编辑编号:1
以下是我的PrivateRoute.js
代码
import React from "react";
import { Route, Redirect } from "react-router-dom";
import { connect } from "react-redux";
import PropTypes from "prop-types";
const PrivateRoute = ({component: Component, authentic, ...rest}) => (
<Route
{...rest}
render={ props =>
authentic.isAuthenticated === true ? (
<div>
<Component {...props} />
</div>
) : (
<Redirect to="/" />
)
}
/>
);
PrivateRoute.propTypes = {
authentic: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
authentic: state.auth
});
export default connect(mapStateToProps)(PrivateRoute);
编辑编号:2
以下是redux store provider
:(这是在index.js
文件中)
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './components/App';
import store from "./store";
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
, document.getElementById('root'));
编辑编号:3
以下是MoviesDetails
组件
import React, { Component } from "react";
import Container from '@material-ui/core/Container';
import { connect } from "react-redux";
import Table from '@material-ui/core/Table';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';
import TableBody from '@material-ui/core/TableBody';
import TableContainer from '@material-ui/core/TableContainer';
import { moviesList } from "./actions/moviesActions";
class MoviesDetails extends Component {
constructor() {
super();
this.state = {
skip: 0,
limit: 10,
pageNumber: 0,
value: '',
nameMovie:"",
genre:"",
ratings:"",
numberOfSongs:"",
releaseDate:"",
};
}
componentDidMount() {this.fetchRecords();}
fetchRecords=async()=>{
let payload ={
nameMovie:this.state.nameMovie,
genre:this.state.genre,
ratings:this.state.ratings,
numberOfSongs :this.state.numberOfSongs ,
releaseDate : this.state.releaseDate,
skip : this.state.limit * this.state.pageNumber,
limit: this.state.limit,
}
await this.props.moviesList(payload);
}
render() {
const { classes } = this.props;
return (
<div>
<div />
<Container >
<TableContainer>
<Table>
<TableHead>
<TableRow>
<TableCell>Movie Name</TableCell>
<TableCell>Genre</TableCell>
<TableCell>Song Count</TableCell>
<TableCell>Ratings</TableCell>
<TableCell>Release Date</TableCell>
</TableRow>
</TableHead>
<TableBody>
{this.props.movies.moviesList.map((movie, index) => {
return (
<TableRow >
<TableCell>
{nameMovie}
</TableCell>
<TableCell>{genre}</TableCell>
<TableCell>{numberOfSongs}</TableCell>
<TableCell>{ratings}</TableCell>
<TableCell>{releaseDate}</TableCell>
</TableRow>
)
})}
</TableBody>
</Table>
</TableContainer>
</Container>
</div>
);
}
}
const mapStateToProps = state => {
return {
movie: state.movie,
adim: state.auth.admin,
}
};
export default connect(mapStateToProps, {moviesList })(MoviesDetails);
我像这样处理我的moviesDetails
标签:
handleMovies = (e) => { e.preventDefault();
this.props.history.push("/moviesDetails"); }
解决方案
你应该在更新时将你的 redux 状态持久化到本地存储,并在应用加载时从本地存储初始化你的存储。
最小的 Redux 存储持久性示例:
创建一个“中间”组件来处理对 localStorage 的持久状态更新。
import React, { useEffect } from 'react';
import { useSelector } from 'react-redux];
const StorePersister = ({ children }) => {
const state = useSelector(state => state);
useEffect(() => {
localStorage.setItem('myState', JSON.stringify(state));
}, [state]);
return children;
};
index -App
用存储持久化器包装组件。
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import App from './components/App';
import StorePersister from './components/StorePersister';
import store from "./store";
ReactDOM.render(
<Provider store={store}>
<StorePersister>
<App />
</StorePersister>
</Provider>,
document.getElementById('root')
);
从本地存储初始化状态。如果没有“myState”键或解析返回null
,则空对象 ( {}
) 将用作后备。
import { createStore, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";
import rootReducer from "./reducers";
const initialState = JSON.parse(localStorage.getItem('myState')) || {};
const store = createStore(
rootReducer,
initialState,
compose(
applyMiddleware(thunk),
(b&&a()) || compose
)
);
export default store;
还有一个redux-persist包,它为持久化和初始化的内容提供了一些自定义。
推荐阅读
- browser - 如何在没有 cookie 的情况下打开多个 Web 浏览器窗口?
- javascript - 如何在中间对齐 DocumentFragment?
- python - 如何修复 Tkinter 中的 entry.get() 函数?
- powershell - Powershell通过保持文件夹结构(文件夹+子文件夹)从文件夹路径压缩超过X天的文件,并排除一些子文件夹
- javascript - Html 模板标签:防止变成
- clojure - Leiningen 无法正常工作 MacOs Mojave 原因是:java.io.FileNotFoundException:无法找到 clojure/tools/nrepl/server__init.class
- c# - 实体框架和mysql
- javascript - mongoose/mongodb 处理垃圾邮件喜欢/不喜欢按钮和更新
- python - 为什么 PyDev 7.5 会错误地检测到使用 typing.overload 的重复签名?
- go - 将数据转换为镶木地板