Блог

Я скопировал решение для хранилища / маршрутизатора из моего предыдущего проекта, где оно работало нормально. Затем обновил зависимости redux / router / dom, внес некоторые изменения, например. удалил IndexRoute и использовал createBrowserHistory. В dev. tools отображается, что Provider компонент отображается, но он не отображает какой-либо другой компонент.

index.js

     import React from 'react';
    import { render } from 'react-dom';
    import Foo from './components/Foo ';
    import Bar from './components/Bar ';
    import Components from './components/App'
    import { BrowserRouter as Router, Route, IndexRoute } from 'react-router-dom';
    import { Provider } from 'react-redux';
    import store, { history } from './store';

const router = (
  <Provider store={store}>
    <Router history={history}>
          <Route exact path="/" exact component={Components.MainConnectedWithProps} />
          <Route exact path="/foo" component={Components.FooConnectedWithProps} />
          <Route exact path="/bar" component={Components.BarjkaConnectedWithProps} />
    </Router>
  </Provider>
)

render(router, document.getElementById('root'));

//render(<Foo />, document.getElementById('root')); works just fine
 

App.js

   import * as actionCreators from '../actions/actionCreators' 
    import {bindActionCreators} from 'redux'
    import Main from './Main'
    import Foo from './Foo '
    import Bar from './Bar '
    import { connect } from 'react-redux'

function mapStateToProps(state) {
            return {
                     sampleData: state.sampleData
            }
        }
function mapDispachToProps(dispatch){
        return bindActionCreators(actionCreators, dispatch)
        }


export default {
    MainConnectedWithProps : connect(mapStateToProps, mapDispachToProps)(Main),
    FooConnectedWithProps: connect(mapStateToProps, mapDispachToProps)(Foo),
    BarConnectedWithProps: connect(mapStateToProps, mapDispachToProps)(Bar)
  }
 

store.js

 import { createStore } from 'redux'
import {syncHistoryWithStore} from 'react-router-redux'
import { createBrowserHistory } from 'history'

import rootReducer from './reducers/index';

const defaultState = {
    sampleData: sampleData
}

const store = createStore(rootReducer, defaultState)
export const history = syncHistoryWithStore(createBrowserHistory(), store);
export default store;
 

package.json

 "react-dom": "^17.0.1",
"react-redux": "^4.4.10",
"react-router": "^6.0.0-beta.0",
"react-router-dom": "^6.0.0-beta.0",
"react-router-redux": "^4.0.8"
 

Я довольно новичок в React, поэтому это может быть какой-то глупой ошибкой. Заранее всем спасибо.

РЕДАКТИРОВАТЬ: я создал изолированную среду с основными функциями — визуализировать множество компонентов по одному пути «/» и конкретному компоненту с путями «/ foo» или «/ bar» с использованием redux. Он отлично работает после изменения BrowserRouter на Router with history object . https://codesandbox.io/s/old-dawn-spggs?file=/src/components/App.js

Но когда я пробую то же самое в VS Code, он выдает местоположение prop, помеченное как требуемое Router , но его значение равно undefined error для Router history={history} и без ошибок, но ничего не отображает для <BrowserRouter />

РЕДАКТИРОВАТЬ 2: я использовал точно такую же версию истории, реакции, зависимостей, как и в codesandbox, и она тоже работала в VS Code. Но Link , похоже, сейчас не работает. Когда я набираю «/ bar» вручную, он отображается Bar , но когда я нажимаю на Link path="/bar" него, он ничего не отображает.

РЕДАКТИРОВАТЬ 3: я более внимательно рассмотрел ссылки, предложенные в комментариях, и решение состоит в том, чтобы понизить history зависимость до 4.7.1.

Кроме того, является ли использование этого MainConnectedWithProps , FooConnectedWithProps … для каждого отдельного компонента хорошей идеей для передачи реквизитов? Раньше я использовал React.CloneElement , но я думаю, что это не так, поскольку IndexRoute прошло?