Reactjs 如何在React.js中将redux与路由器一起使用

我想问一下如何在React.js中将redux与路由器一起使用

我尝试在这个链接代码中使用redux和router

我的意图如下：

1） /src/modules是redux的目录，redux将布尔标志存储为符号

2） 在src/modules/index.js中使用combineReducer

3） 当用户访问路径“/”时，渲染主组件（App.js）

4） 在呈现主组件时，如果redux（src/modules/auth.js）的符号值为true，则将其设置为false；如果redux的符号值为false，则将其设置为true。并呈现redux的符号值

但我遇到了下面的错误

TypeError: Object(...) is not a function

Provider
node_modules/react-redux/es/components/Provider.js:10
   7 | var store = _ref.store,
   8 |     context = _ref.context,
   9 |     children = _ref.children;
> 10 | var contextValue = useMemo(function () {
     | ^  11 |   var subscription = new Subscription(store);
  12 |   subscription.onStateChange = subscription.notifyNestedSubs;
  13 |   return {

下面是每个代码

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

import { Provider } from 'react-redux';
import { createStore } from 'redux';
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from './modules';

const store = createStore(rootReducer, composeWithDevTools());

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

serviceWorker.unregister();

//src/App.js
从“React”导入React；
从“react router dom”导入{Route，Link，Switch}；
从“/关于”导入关于；
从“./主页”导入主页；
从“/Profiles”导入配置文件；
从“./HistorySample”导入HistorySample；
常量应用=（）=>{
返回(


家


简介


轮廓


历史例子



(
不存在。
{location.pathname}

)}
/>
);
};
导出默认应用程序；

//src/Home.js
从“React”导入React；
从'react redux'导入{connect}；
从“./modules/auth”导入{tact，fact}；
常量Home=（{符号、策略、事实}）=>{
如果（符号===真）{
事实（）；
}否则{
机智（）；
}
返回(
家
{sign}
);
};
导出默认连接(
状态=>({
符号：state.sign
}),
{
机智
事实
}
)（家）；

我想知道为什么会发生这种类型的错误，以及如何解决这个问题。我猜这是因为我同时使用了redux和router，但我没有找到合适的解决方案

你能告诉我我还应该做些什么吗

---

谢谢你的阅读

你能发布你的代码吗？@Yun请输入一些代码和你的澄清要求，这样会有所帮助you@duc对不起，我找不到如何更新我的问题。所以我为每个代码发布了这些链接。对不起，谢谢你的建议。src/modules/auth.js src/modules/index.js src/App.js src/Home.js您可以使用文章左下角的编辑按钮编辑文章。编辑你的文章要好得多，因为从长远来看，外部链接不够稳定。@Vahid Akhtar谢谢你的建议。我刚才发布了每个代码的链接。我想知道为什么会发生这种类型的错误，以及如何解决这个问题。我猜这是因为我同时使用了redux和router，但我没有找到合适的解决方案。

// src/modules/auth.js
import {createAction, handleActions} from 'redux-actions';


const TRUE_ACTION = 'auth/TRUE';
const FALSE_ACTION = 'auth/FALSE'; 

export const tact = createAction(TRUE_ACTION);
export const fact = createAction(FALSE_ACTION);

const initialState = {
    sign:false
};

const auth = handleActions(
    {
        [TRUE_ACTION]:()=>{
            return true;
        },
        [FALSE_ACTION]:()=>{
            return false;
        }
    },
    initialState
);

export default auth;

// src/modules/index.js

import {combineReducers} from 'redux';
import auth from './auth';

const rootReducer = combineReducers({
    auth,
});

export default rootReducer;

// src/App.js

import React from 'react';
import { Route, Link, Switch } from 'react-router-dom';
import About from './About';
import Home from './Home';
import Profiles from './Profiles';
import HistorySample from './HistorySample';

const App = () => {
  return (
    <div>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">intro</Link>
        </li>
        <li>
          <Link to="/profiles">profile</Link>
        </li>
        <li>
          <Link to="/history">History example</Link>
        </li>
      </ul>
      <hr />
      <Switch>
        <Route path="/" component={Home} exact={true} />
        <Route path={['/about', '/info']} component={About} />
        <Route path="/profiles" component={Profiles} />
        <Route path="/history" component={HistorySample} />
        <Route

          render={({ location }) => (
            <div>
              <h2>not existed.</h2>
              <p>{location.pathname}</p>
            </div>
          )}
        />
      </Switch>
    </div>
  );
};

export default App;

// src/Home.js

import React from 'react';
import {connect } from 'react-redux';
import {tact, fact} from './modules/auth';

const Home = ({sign, tact, fact}) => {

  if(sign===true){
    fact();
  }else{
    tact();
  }

  return (
    <div>
      <h1>Home</h1>
      <div>{sign}</div>
    </div>
  );
};

export default connect(
  state => ({
    sign:state.sign
  }),
  {
    tact,
    fact
  }

)(Home);