Совпадающий маршрут не меняется при изменении хэша маршрутизации

Я использую react-router-dom с react-router-redux и history для управления маршрутизацией для своего приложения. Я также использую историю хэшей для поддержки устаревших браузеров. Ниже приведены компоненты моего маршрута:

<Switch>
    <Route exact path={'/'} component={...} />
    <Route path={'/a'} component={...} />
    <Route path={'/b'} component={...} />
</Switch>

Мое приложение попадает в местоположение: http://something.com/index.html#/ и правильно направляется к первому компоненту Route. Однако при использовании dispatch(push('/a')) в создателе действия thunk для попытки программного переключения маршрутов я обнаружил, что правильный маршрут не соответствует.

Мне трудно отлаживать это... есть идеи? Я думаю, что это, возможно, связано с тем фактом, что мой window.location.pathname является /index.html.


javascript redux react-router-dom react-router
person sir_thursday    schedule 01.03.2018    source источник
comment
Нужна дополнительная информация о том, что происходит, когда вы выполняете отправку... некоторые фрагменты кода, а также почему создатели действий, вы можете напрямую использовать push..   -  person theAnubhav    schedule 04.03.2018
comment
Попробуйте использовать withRouter в своем компоненте. Прочитайте это: github.com/ReactTraining/react-router/issues/4913   -  person Alisson Alvarenga    schedule 06.03.2018
comment
Также предоставьте информацию о конфигурации маршрутизации сервера. Неправильная конфигурация на стороне сервера может привести к непредвиденным последствиям на стороне клиента.   -  person Oleg G    schedule 07.03.2018

Ответы (1)


arrow_upward
5
arrow_downward

Switch получить реквизит местоположения или должен быть обернут компонентом Router. Дополнительную информацию можно найти по адресу https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Switch.md#children-node/

Если реквизит местоположения задан для , он переопределит реквизит местоположения для соответствующего дочернего элемента.

Итак, попробуйте один из следующих способов:

class Example extends Component {
render() {
    return (
        <Switch location={this.props.location}>
          <Route exact path={'/'} component={...} />
          <Route path={'/a'} component={...} />
          <Route path={'/b'} component={...} />
        </Switch>
    );
}

// location is react-router-redux reducer
export default connect(state => ({location: state.location}))(Example);

Или, по-другому, вы можете сделать, это обернуть ваш компонент коммутатора компонентом маршрутизатора (я вставил код из одного из моих проектов):

import React from 'react';
import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';
import { Route, Switch } from 'react-router-dom';
import { ConnectedRouter } from 'react-router-redux';
import createHistory from 'history/createBrowserHistory';
import configureStore from './store/configureStore';


const history = createHistory();

const store = configureStore(history);

// We wrap Switch component with ConnectedRouter:
ReactDOM.render(
    <Provider store={store}>                
            <ConnectedRouter history={history}>
                <Switch>
                    <Route exact path={'/'} component={...} />
                    <Route path={'/a'} component={...} />
                    <Route path={'/b'} component={...} />              
                </Switch>
            </ConnectedRouter>
    </Provider>,
    document.getElementById('root')
);

Дополнительную информацию о компонентах Router вы можете найти здесь: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Router.md

person Nik    schedule 07.03.2018