Универсальное исправление: ошибка истории браузера: не удается прочитать свойство 'listen' неопределенного

#javascript #node.js #reactjs #redux #react-router-redux

#javascript #node.js #reactjs #сокращение #react-router-redux

Вопрос:

Я пытаюсь реализовать универсальный рендеринг для моего приложения react-redux с помощью express.js сервер, я следую инструкциям по: http://redux.js.org/docs/recipes/ServerRendering.html

всякий раз, когда я пытаюсь импортировать файлы rootreducer или приложения в экспресс server.js файл, как описано в руководстве, я получаю следующую ошибку:

 node_modulesreact-router-reduxlibsync.js:105
 unsubscribeFromHistory = history.listen(handleLocationChange);
                              ^
TypeError: Cannot read property 'listen' of undefined
at syncHistoryWithStore (C:Usersuser pcDesktopcitydrillnode_modulesreact-router-reduxlibsync.js:105:35)

Это код, относящийся к моему файлу хранилища:

 import { syncHistoryWithStore } from 'react-router-redux';
import { browserHistory } from 'react-router';

const store = createStore(rootReducer, initialState, compose(
    applyMiddleware(thunk)
));

export const history = syncHistoryWithStore(browserHistory, store);

Затем я просто использую history const в клиентском приложении следующим образом:

 const router = (
<Provider store={store}>
    <Router history={history}>
        <Route name="Home" path="/" component={App}>
            <IndexRoute name="Home" component={Landing}></IndexRoute>
        </Route>
    </Router>
</Provider>

)

Я перепробовал так много разных руководств, кроме того, в redux.js.org тоже, и я всегда застреваю в этой точке, потому что я всегда должен импортировать какой-то файл из моего клиентского кода внутри моего express server.js файл, и всякий раз, когда я это делаю, я всегда получаю одну и ту же ошибку.

Как я могу реализовать universal redux? что я делаю не так? я следил за таким количеством руководств, и ни в одном из них не упоминалась эта ошибка, почему она работает для этих ребят, но не в моем приложении?

Спасибо за помощь

Ответ №1:

Вы не можете использовать browserHistory его на стороне сервера, так как название указывает на то, что он предназначен для браузеров. Используйте memoryHistory вместо этого:

https://github.com/ReactTraining/react-router/blob/master/docs/guides/Histories.md