Расчесывание React Router и Redux заставило меня перенаправить нокаут

Question

Мне нужно совместить использование Redux и React Router.Сначала я попытался отреагировать на маршрутизатор в одиночку, и когда я щелкал по своим изображениям, меня правильно перенаправили.

Я следовал redux tutorial , и теперь, когда я нажимаю на мои изображения, я меняю адрес (например: http://localhost:3000/contact) но ничего не отображается, как если бы компонент был пустым.

Root.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

index.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'))

App.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

Вы знаете, что не так?

Answer 1

Несколько замечений, которые я заметил:

При использовании реагирующего маршрутизатора вы не должны использовать window.location для перенаправления, так как это перезагружает всю страницу.Компонент <Redirect> от реагирующего маршрутизатора - лучший выбор здесь.

Также не следует использовать пропелу component на <Route> -компоненте для вещей, которые на самом деле не являются компонентами, так как естьrender опора для этого (подробнее об этом здесь ).

Более того: <Route exact path="/:filter?" component={App} /> не будет работать, поскольку :filter? ищет переменную, а exact - этоищу точный совпадение.Более того, вы, вероятно, не должны ставить гибкий в первую очередь, так как он будет соответствовать каждому маршруту, который вы на него бросаете.Таким образом, все следующие маршруты практически недоступны.