使用提供程序向路由器提供存储的正确方法

Question

在我的应用程序中，我试图提供存储到路由器，如下面的代码所示。但似乎没有按预期工作。谁能建议我正确的方法呢？我在下面提供了我的代码。

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;

错误::

Answer 1

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

然后，使用提供程序组件包装您的应用，然后在内部调用路由器：

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

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

尝试一下：）