Реакция-маршрутизатор игнорирует вложенные маршруты при предоставлении URL-адреса с путем

Я играю с react и redux, пытаясь собрать базовое приложение с react-routes. На данный момент мне удалось собрать следующее вместе, которое работает для Wrapper и Home страницы, однако страница «приложения», похоже, не загружается, если я перехожу на localhost:8080/apps. Я просто получаю 404 каждый раз.

Любые идеи, где я мог ошибиться здесь?

В консоли нет ошибок или предупреждений, и я пытался просмотреть несколько примеров в Интернете, однако ни один из них не отличался от того, что у меня есть,

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux'
import { browserHistory } from 'react-router';
import { syncHistoryWithStore } from 'react-router-redux';

import Routes from './routes/routes';
import { configureStore } from './store/configureStore';

const rootElem = document.getElementById('mount');

const store = configureStore(browserHistory);
const history = syncHistoryWithStore(browserHistory, store);

const provider = <Provider store={store}><Routes history={history} /></Provider>;

ReactDOM.render(provider, rootElem);

маршруты/routes.js

import React from 'react';
import { Router, Route, IndexRoute } from 'react-router'

import { Wrapper, Home, Apps } from './../views';

class Routes extends React.Component {

    render () {

        const { history } = this.props;

        return(
            <Router history={history}>
                <Route path='/' component={Wrapper}>
                    <IndexRoute component={Home}/>
                    <Route path='apps' component={Apps}/>
                </Route>
            </Router>
        );
    }
}

Routes.propTypes = {
    history: React.PropTypes.object.isRequired
};

export default Routes;

store/configureStore.js

import { createStore, applyMiddleware, compose } from 'redux';
import { routerMiddleware } from 'react-router-redux'
import createLogger from "redux-logger";
import thunk from 'redux-thunk';

import rootReducer from './../reducers'

export function configureStore(history, initialState = {}) {

    const logger = createLogger();
    const middleware = routerMiddleware(history);

    const store = createStore(
        rootReducer,
        initialState,
        compose(
            applyMiddleware(thunk, middleware, logger),
            window.devToolsExtension ? window.devToolsExtension() : f => f
        )
    );

    return store;
}

редьюсеры/index.js

import { combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';

export default combineReducers({
    //...reducers,
    routing: routerReducer
});

person Community    schedule 09.04.2016    source источник
comment
Поскольку вы сказали, что у вас проблема только с URL-адресом, вы пробовали вместо этого использовать localhost:8080/#/apps?   -  person shriek    schedule 09.04.2016
comment
Да, я тоже пробовал, но все равно отображалась домашняя страница, настроенная для /   -  person    schedule 09.04.2016
comment
Я думаю, это ответит на ваш вопрос URL">stackoverflow.com/questions/32098076/   -  person Sachin Gadagi    schedule 09.04.2016
comment
@TheCrazyChimp, не уверен в этом, но тебе не хватает / в path='apps'?   -  person shriek    schedule 09.04.2016


Ответы (1)


Вы используете browserHistory из react-router, поэтому ваш сервер должен иметь возможность обрабатывать глубокие ссылки и по-прежнему обслуживать правильный файл. Поскольку вы подключаетесь к порту 8080, я предполагаю, что вы, вероятно, используете webpack-dev-server.

Вы можете просто переключиться на hashHistory и все будет работать. В документации по react-router объясняется настройка сервера для работы с browserHistory: https://github.com/reactjs/react-router/blob/master/docs/guides/Histories.md

Для webpack-dev-server вам просто нужно передать дополнительную опцию в объект конфигурации: historyApiFallback: true. Это заставит сервер разработки возвращать index.html для любых глубоко связанных запросов, используя connect -history-api-fallback.

...
devServer: {
  historyApiFallback: true
}
...
person Interrobang    schedule 09.04.2016
comment
Спасибо. Мне не хватало дополнительного флага devServer в моей конфигурации webpack-dev-server. Теперь это работает так, как ожидалось. - person ; 30.04.2016