Маршруты React-Router ведут себя странно

Question

Я пытаюсь запустить пример книги с магазином фильмов.У меня есть страница, чтобы подтянуть и посмотреть правильно.Проблема в том, что когда я нажимаю на изображение фильма, ничего не происходит (на маршрутизаторе реакции должен отображаться информационный блок о выбранном фильме).Мой начальный URL: http://localhost/~johndoe/react-dir/test-webpack/

Когда я нажимаю на изображение фильма, ничего не происходит, и адресная строка меняется на: http://localhost/movies/1

Инструменты разработчика Chrome,консоль говорит: browser.js: 49 Предупреждение: [реакции-маршрутизатор] Местоположение "/ movies / 1" не соответствует ни одному из маршрутов

Мой файл rout.js:

const React = require('react');
const {Router, Route, IndexRoute, browserHistory} = require('react-router');
const App = require('components/app/app.js');
const Movies = require('components/movies/movies.js');
const Movie = require('components/movie/movie.js');
module.exports = (
<Router history={browserHistory}>
    <Route path={"/~johndoe/react-dir/test-webpack/"} component={App}>
        <IndexRoute component={Movies}/>
        <Route path={"movies"} component={Movies}>
            <Route path={":id"} component={Movie}/>
        </Route>
    </Route>
</Router>
);

МожетКто-нибудь подсказать, что может пойти не так?Я не уверен, что искать, чтобы это исправить.Любая помощь будет оценена.

Answer 1

Хорошо, потребовалось немного времени, чтобы разобраться в том, что происходит, но вот рабочая версия.

Что происходит не так :

• Вы не можетесопоставить неопределенный объект или массив.Вам необходим условный рендеринг, чтобы проверить, пуст ли элемент - я использовал isEmtpy от lodash, так как он упрощает жизнь: array && array.length > 0 для массивов и / или Object.entries(obj).length === 0 && obj.constructor === Object для объектов.Без условного рендеринга, когда вы нажимали на ссылку, вы по сути ломали свое приложение.

Что я изменил :

• Добавлен условный рендеринг с использованием lasashes isEmpty.Если значение movies или movie еще отсутствует, будет отображаться элемент Loading... или null.
• Используются жизненные циклы componentDidMount и componentDidUpdate.Начиная с версии 16+, componentWillMount и componentWillUpdate устарели и не рекомендуются.
• Переведено в операторы Babel ES6 import и export - не могу придумать причину использования module.exports над import и export, особенно если вы используете babel для транспортаваш код.В наши дни вы, скорее всего, найдете два в комплекте.Тем не менее, вы можете сделать вашу жизнь сложнее и не использовать babel.:)
• Мне не особо нравится redux-actions, поскольку он скрывает то, что происходит с redux и его store.Поэтому я разделил все на actions, reducers и types.

Мне легче понять поток (круг жизни):

• Внутри connect ed компонента пользователь щелкает элемент (например, кнопку).), который вызывает action.
• action возвращает type и payload для reducer.
• reducer совпадает с type и мелкое объединяет payload в редуктор state.
• Компонент, connect ed для редуктора, принимает новый редуктор state как props.

Проблемы, с которыми вы столкнетесь при текущей настройке:

• Использование строк в качестве импорта не будет работать, когда ваше приложение связано.Они разрешат каталоги, которые больше не существуют.Рекомендуется либо обслуживать изображения (, например, CDN - посмотрите примеры в JSON movie.cover в кодах и окне), либо импортировать их непосредственно в файл, который требует их .
• Если пользователь попытается перейти непосредственно к movies/:id, это приведет к разрыву приложения, поскольку movies в настоящее время не будет определено в вашем состоянии redux.Таким образом, вместо использования маршрутизации для демонстрации деталей, я бы рекомендовал использовать локальный state React, чтобы выскочить и скрыть подробный вид в зависимости от того, какой фильм был выбран.

Рекомендуется:

• Ваши зависимости устарели.Если в этом нет особой необходимости, я бы предложил обновить react и react-dom с 15,2 до 16.x.и обновление с реакции-маршрутизатора 2.6 до react-router-dom или, по крайней мере, до react-router v3 +.
• Если вы ищете более современный шаблон, я бы порекомендовал мой Webpack-React-Boilerplate .

Рабочий пример : https://codesandbox.io/s/nk715xpqv4 (шаблон CRASandSandbox не поддерживает модули CSS, поэтому мне пришлосьимпортируйте стили и используйте className в качестве строки, но это не означает, что вам нужно для вашего проекта).