正确使用Provider为路由器提供商店的方法

问题描述 投票:0回答:1

在我的应用程序中,我正在尝试向Router提供存储,如下面的代码所示。但似乎没有按照期望工作。任何人都可以建议我这样做的正确方法吗?我在下面提供了我的代码。

index.js

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import store from "./store";
import { Provider } from 'react-redux'

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

App.js

import React, { Component } from "react";
import "./App.css";
import SectionIndicator from "./components/SectionIndicator/SectionIndicator";
import Section from "./components/Section/Section";
import { BrowserRouter as Router, Route, Switch, browserHistory } from "react-router-dom";
import Section2 from "./components/Section/Section2"; import CheckUpButton from "./components/CheckUpButton/CheckUpButton";
import AppContent from "./AppContent";
import createHistory from "history/createBrowserHistory";

class App extends Component {
    render() {
        const history = createHistory({ basename: '/' });
        return (
            <Router history={history} >
                <div>
                    <Switch>
                        <Route path="/" exact component={CheckUpButton} />
                        <Route path="/assess" exact component={AppContent} />
                        <Route path="/section2" component={Section2} />
                    </Switch>
                </div>
            </Router>
        )
    }
}

export default App;

错误::

enter image description here

reactjs
1个回答
0
投票

您应该在ReactDOM.Render中调用您的App组件: ReactDOM.render(<App />, document.getElementById('root'));

然后,使用提供程序组件包装您的应用程序并调用您的路由器:

<Provider store={store}>
    <Router history={history}>
         <Routes />    
    <Router />
<Provider />

不要忘记将历史记录传递给路由器组件。

试试这种方式:)

© www.soinside.com 2019 - 2024. All rights reserved.