Я вообразил сценарий для маршрутизации, который не работал, я не знаю, какое решение тогда принять:
У меня есть URL-адреса, которые я перенаправил как
/levelOne/:levelOne
/levelOne/:levelOne/levelTwo/:levelTwo
ЭСТ ...
перед запуском метода рендеринга я сохраняю значения levelOne и levelTwo в localStorage
function renderComplaintHome(props) {
const LOCAL_CACHE = gql`
query localCache {
kind @client
eid @client
}
`
return (
<Query query={LOCAL_CACHE}>
{({data, client}) => {
console.log("Writing route params to local cache ", props.match.params)
client.writeData({data: props.match.params})
return <ComplaintHome {...props}/>
}}
</Query>)
}
...
class App extends Component {
render() {
return (
<MuiThemeProvider theme={theme}>
<BrowserRouter>
<Switch>
</Route>
<Route exact path="/:kind"
render={renderComplaintHome}>
</Route>
<Route path="/:kind/search/:name"
render={renderComplaintHome}>
</Route>
<Route exact path="/:kind/shop/:eid"
render={renderComplaintHome}>
...
это на самом деле работает нормально: если я наберу URL вручную, я найду правильные значения в localStorage
В моих компонентах я использую localStorage в качестве единственного источника истины, поэтому, если я хочу изменить URL-адрес, я изменяю свое локальное состояние, которое вызывает переход к URL-адресу с новыми значениями.
Поскольку маршрут установит новые значения для localStorage, представления теперь должны видеть новые значения без необходимости считывать их из реквизитов: каждый компонент выполняет свой запрос независимо от других компонентов, получающих свои значения из хранилища loal.
onEntitySelected(event, {suggestion}) {
const data = {name: suggestion.name};
console.log("writing data to cache: ", data)
this.client.writeData({data: data})
window.alert('setting state id to '+ suggestion._id)
this.eid = suggestion._id
}
render() {
//... some rendering code, then a conditional routing
{this.eid != null && this.eid !== localData.eid && <Redirect to={`/${localData.kind}/shop/${this.eid}`}/>
}
Теперь моя проблема в том, что это не работает: localStorage никогда не обновляется: я получаю ошибку
Предупреждение: невозможно обновить во время существующего перехода состояния (например, в render
или в конструкторе другого компонента). Методы рендеринга должны быть чистой функцией реквизита и состояния; побочные эффекты конструктора являются анти-паттернами, но их можно переместить в componentWillMount
.
Теперь, если я хочу переместить обновление localStorage в componentWillMount, я не могу этого сделать, поскольку у меня нет параметров URL: маршрут предлагает только метод визуализации:
<Route exact path="/:kind/shop/:eid"
render={renderComplaintHome}>
есть идеи, пожалуйста?
Если вопрос не ясен, пожалуйста, не стесняйтесь комментировать, я сделаю все возможное, чтобы сделать его читабельным