结合 React Router 和 Redux 使我的重定向 KO

我必须结合使用 Redux 和 React Router。我首先尝试单独反应路由器，当我单击我的图像时，我被正确重定向。

我遵循了redux 教程，现在当我单击我的图像时，我更改了地址（例如：http://localhost:3000/contact）但没有任何显示，就好像组件是空的一样。

根.js

import React from 'react';
import './index.css';
import PropTypes from 'prop-types'
import ReactDOM, { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom'
import App from './App'
import Users from './users'
import Book from './Book'
import Notfound from './notfound'

import { Provider } from 'react-redux';
import Store from './redux/Store/store'

import * as serviceWorker from './serviceWorker';

const Root = ({ store }) => (
    <Provider store = { Store }>
      <Router>
        <div>
          <Switch>
              <Route exact path="/:filter?" component={App} />
              <Route path="/users" component={Users} />
              <Route path="/book" component={Book} />  
              <Route path='/manual' component={() => { window.location = 'https://------'; return null;} }/>
              <Route path='/contact' component={() => { window.location = 'https://-------'; return null;} }/>
              <Route component={Notfound} />
          </Switch>
        </div>
      </Router>
    </Provider>
)

Root.propTypes = {
  store: PropTypes.object.isRequired
}
serviceWorker.unregister();
export default Root

索引.js：

import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import myReducer from './redux/Reducers/myReducer'
import Root from './Root'

const store = createStore(myReducer)

render(<Root store={store} />, document.getElementById('root'))

应用程序.js：

import React from 'react'
import { Route, Link, Redirect, withRouter, BrowserRouter as Router } from 'react-router-dom'
import logo from './images/logo.png';
import book from './images/book.png';

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      date: new Date()
    };
  }

  render() {
    const { date } = this.state;
    return (
      <div>
          <img src={logo} />
          <img src={book} onClick={() => this.props.history.push('/book')}/>
          <img src={call} onClick={() => this.props.history.push('/contact')}/>
      </div>
    )
  }

}
export default App

你知道有什么问题吗？