Как перезагрузить URL без обновления страницы в ReactJs?
Я пытаюсь выполнить перезагрузку по тому же маршруту, не обновляя страницу. В этом конкретном случае используется history.pushState(), но я получаю сообщение об ошибке:
TypeError: history.pushState is not a function.
Вот мой код:
import React from 'react';
import PropTypes from 'prop-types';
import { Container } from 'kawax-js';
import { Switch, Route } from 'react-router-dom';
import File from './FileContainer';
import Folder from './FolderContainer';
import HomeContainer from './HomeContainer';
class RootContainer extends React.Component {
static stateToProps = ({ ownProps, select }) => {
const files = select('files');
const lastFile = _.last(files);
return ({
lastFile: lastFile || {}
})
};
static propTypes = {
history: PropTypes.object.isRequired
};
static defaultProps = {
lastFile: {}
};
render() {
const { lastFile, history } = this.props;
if ( lastFile === {} || !lastFile.isUploaded
|| lastFile.isUploaded === null) {
return (
<Switch>
<Route exact path = "/" component = {HomeContainer} />
<Route exact path = "/file/:itemPath/:refHash" component = {File} />
<Route exact path = "/:folderName" component = {Folder}/>
</Switch>
);
}
return history.pushState(null, "/:folderName")
}
}
export default Container(RootContainer);
Есть ли лучший способ сделать это, или я что-то здесь упускаю?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
пожалуйста, используйте этот код Router.browserHistory.push ('/'); вместо history.pushState (null, "/: имя папки")
Но это просто перенаправит меня на мою домашнюю страницу, я хочу просто перезагрузить страницу, на которой я сейчас нахожусь.
тогда вы помещаете свой текущий URL после /
Я пробовал это, но потом у меня появился RootContainer(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.. Я тоже попробовал <Redirect to = {location} component = {Folder}/>, но в этом случае получаю: You tried to redirect to the same route you're currently on: "/test".
попробуйте вот это location.reload ();
Пробовал раньше: D, что действительно обновляет страницу, которую я не хочу, я хочу, чтобы она была одностраничной, где ничего не нужно обновлять. Я действительно схожу с ума здесь ...
используйте следующий fomat window.history.pushState ({"html": response.html, "page Title": r response.page Title}, "", путь к URL-адресу); не теряй надежду
Для более подробного изучения управления историей браузера см. Этот developer.mozilla.org/en-US/docs/Web/API/History_API
У вас есть несколько возможностей сделать это, в настоящее время мой любимый способ сделать это - использовать анонимную функцию в опоре компонента:
<Switch>
<Route exact path = "/" component = {()=><HomeContainer/>} />
<Route exact path = "/file/:itemPath/:refHash" component = {()=><File/>} />
<Route exact path = "/:folderName" component = {()=><Folder/>}/>
</Switch>
Или, если вы хотите обновить текущие параметры URL-адреса, вам понадобится дополнительный маршрут (перезагрузка) и немного поиграйте со стеком маршрутизатора:
reload = ()=>{
const current = props.location.pathname;
this.props.history.replace(`/reload`);
setTimeout(() => {
this.props.history.replace(current);
});
}
<Switch>
<Route path = "/reload" component = {null} key = "reload" />
<Route exact path = "/" component = {HomeContainer} />
<Route exact path = "/file/:itemPath/:refHash" component = {File} />
<Route exact path = "/:folderName" component = {Folder}/>
</Switch>
<div onCLick = {this.reload}>Reload</div>
Вы можете получить желаемый результат, принудительно перерисовав компонент, взгляните на документация здесь. Я вижу, вы расширяете React.Component, поэтому вы должны иметь возможность делать следующее:
...
constructor() {
this.reload = this.reload.bind(this);
}
...
reload() {
this.forceUpdate();
}
...
Я знаю, что он не использует history, но другого кода не потребуется, так как он включен в класс Component.
Какова цель обновления истории?