我不想在react中重新呈现我以前的组件

Question

我正在构建一个搜索引擎的UI使用elasticsearch在反应。我在用分页技术。现在，如果有人单击“结果”，然后返回到“结果列表”，它将从一开始就显示出来。我希望位置在相同的点上，结果可能。怎么做？

这是我的代码：

Routes.js

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route
} from 'react-router-dom';
import App from '../components/app';
import Header from '../components/header';
import Footer from '../components/footer';
import Single from '../components/single';
import NoMatch from '../components/noMatch';
import createHistory from 'history/createBrowserHistory'

const history = createHistory();

class Routes extends React.Component {

render() {
    return(
        <Router history={history}>
             <div className="main">
                <Header />
                <Switch>
                    <Route exact path = "/" component={App}/>
                    <Route path = "/photo/:id/:keyw" component={Single}/> 
                    <Route path = "/*" component={NoMatch} /> 
                </Switch>
                <Footer />
            </div>
        </Router>
    )
}
}

 export default Routes; 

我想要的组件应该保持不变，而不是重新呈现：

Searchresults.js

import React from 'react';
import PropTypes from 'prop-types';
import LazyLoad from 'react-lazy-load';
import {
  Link
} from 'react-router-dom';

class SearchResults extends React.Component {

constructor(props) {
    super(props);
    this.state = { results: [] }
}

render () {
    return (
        <div className="cont">
            <hr />
            <ul>
            { this.props.results.map((result) => {
                return (
                            <li key={ result._source.file_name }>
                                <LazyLoad className="lazy">
                                    <Link to={"/photo/" + result._source.file_name + "/" + result._source.keywords}>
                                        <img className="image" src={"http://localhost:3000/photos/" + result._source.file_name} alt="Search Result" />
                                    </Link>
                                </LazyLoad>
                            </li>
                        ) }) }      
            </ul>
        </div>
    )
}
}

SearchResults.propTypes = {
    results: PropTypes.array
}

export default SearchResults;

请帮助我，使此组件不重新呈现。

Answer 1

如果您想在用户返回页面时保持相同的滚动位置，您可能只想显式地设置滚动元素上的scrollTop，这样组件就可以重新命名，而不会失去用户的滚动位置。

这可以通过将用户的滚动位置添加到组件的状态，并使用onScroll更新滚动位置来实现。

或者，使用有助于恢复用户滚动位置(如反应虚拟化 )的列表库可能是一个更干净的解决方案。