时间戳

首页 > 解决方案 > 路由器不渲染

reactjs - 路由器不渲染

问题描述

我从以前运行良好的项目中复制了存储/路由器解决方案。然后更新了 redux/router/dom 依赖项，进行了一些更改，例如。删除了 IndexRoute 并使用了 createBrowserHistory。在开发中。它显示该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

应用程序.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;

包.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 很陌生，所以这可能是一个愚蠢的错误。提前感谢大家。

编辑：我创建了具有主要功能的沙箱 - 使用 redux 在一个“/”路径和具有“/foo”或“/bar”路径的特定组件上渲染许多组件。BrowserRouter更改为Router与history对象后，它工作得很好。https://codesandbox.io/s/old-dawn-spggs?file=/src/components/App.js

但是当我在 VS Code 上尝试相同的操作时，它给出了prop location ismarked as required in Router，但它的值是未定义的错误，Router history={history}并且没有错误，但没有呈现任何内容<BrowserRouter />

编辑2：我使用了与codesandbox中完全相同的历史、反应、redux依赖版本，它在VS Code中也有效。但是Link现在好像不行了。当我手动键入“/ bar”时，它会呈现Bar，但是当我单击Link path="/bar" 它时，它什么也不会呈现。

编辑 3：我仔细查看了评论中建议的链接，解决方案是将history依赖关系降级到 4.7.1。

另外，使用 this MainConnectedWithProps, FooConnectedWithProps...对于每个单独的组件传递道具是一个好主意吗？我曾经使用过，React.CloneElement但我想这不是一件好事，因为IndexRoute它已经消失了？

标签： reactjsreduxreact-reduxreact-routerreact-router-redux

解决方案

推荐阅读