IT技术 - 浏览器重新加载：不返回所选页面，转到默认主页 - ReactJs - 吾爱随笔录

浏览器重新加载：不返回所选页面，转到默认主页 - ReactJs

IT技术 node.js reactjs mongodb express react-redux

2021-05-22 14:34:33

我是使用 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"); }

1个回答

您应该在更新时将您的 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包，它为持久化和初始化的内容提供了一些自定义。

其它你可能感兴趣的问题

上一篇在 React Js 中过滤 Todo 列表下一篇如何在graphql方案中迭代json嵌套数组