React-Redux и совет маршрутизатора

Question

Я обновляю свое веб-приложение.Я добавил Redux, и теперь я хочу добавить React-Router.Я вижу, что с Маршрутизатором лучше не использовать приложение в моей функции, а на другой странице, но как мне теперь это сделать?У меня есть что-то вроде этого: App.js

import React, { Component } from "react";
import { connect } from "react-redux";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import Home from "../Routes/Home";
import { getShows } from "../actions/action";
import "./App.css";
import $ from "jquery";

import Test from "../Routes/Test";

const mapStateToProps = state => {
  return {
    isPedding: state.getShowsHome.isPedding,
    data: state.getShowsHome.data
  };
};

const mapDispatchToProps = dispatch => {
  return {
    onGetShows: () => dispatch(getShows())
  };
};

class App extends Component {
  constructor() {
    super();
    this.state = {
      isLoad: false,
      headerSlide: []
    };
  }

  componentDidMount() {
    this.props.onGetShows();
    setTimeout(() => {
      this.loadHeader(
        this.props.data.popularSeries,
        this.props.data.popularMovies
      );
    }, 6000);
  }

  loadHeader = (tvSeries, movies) => {
    let i = 0;
    let pre = [];
    while (i < 5 && this.state.headerSlide.length !== 5) {
      let number = Math.floor(Math.random() * 20);
      pre.forEach(num => {
        if (number === num) {
          number++;
        }
      });
      if (
        number % 2 === 0 &&
        tvSeries[number].backdrop_path != null &&
        tvSeries[number].poster_path != null
      ) {
        let newElement = [...this.state.headerSlide, tvSeries[number]];
        this.setState({ headerSlide: newElement });
      } else if (
        movies[number].backdrop_path != null &&
        movies[number].poster_path != null
      ) {
        let newElement = [...this.state.headerSlide, movies[number]];
        this.setState({ headerSlide: newElement });
      }
      pre.push(number);
      i++;
      console.log(pre);
    }
    $(".loader").fadeOut(1000);
    setTimeout(() => {
      this.setState({ isLoad: true });
    }, 1000);
  };

  render() {
    if (!this.state.isLoad) {
      return <h1 className="loader">Loading</h1>;
    } else {
      return (
        <Router>
          <Switch>
            <Route
              exact
              path="/"
              render={props => (
                <Home
                  {...props}
                  element={this.state.headerSlide}
                  tvSeries={this.props.data.popularSeries}
                  movies={this.props.data.popularMovies}
                  horror={this.props.data.horrorMovies}
                  anime={this.props.data.anime}
                />
              )}
            />
            <Route path="/test" render={() => <Test />} />
          </Switch>
        </Router>
      );
    }
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

Когда я захожу в / test, браузер перезагружает все.Вещи, которые мне не нужны на этой странице, он тоже перезагружает загрузку, поэтому мне нужно создать хранилище и использовать провайдера на маршрутизаторе Home.js, или мне нужно использовать провайдера в App.js, или я могу использовать провайдера только вindex, а на Home.js передаются все функции, соединения и другие вещи, которые я хочу использовать на своей домашней странице?