Проблема с LinkContainer в React-Bootstrap

Question

У меня следующая проблема. Я создаю приложение для реагирования и хочу использовать LinkContainers внутри моей панели навигации, но проблема в том, что когда я использую их вот так:

Я получаю следующую ошибку: «Ошибка: не удалось выполнить инвариант: не следует использовать <withRouter (LinkContainer) /> за пределами». Я уже искал решение и в другом вопросе о переполнении стека, который кто-то написал в качестве ответа, я должен поместить свои компоненты, которые находятся в моем App.js, в маршрутизатор, но когда я это сделаю, я получаю следующую ошибку: «Ошибка: React Ожидается, что .Children получит только один дочерний элемент React ". (div - это потому, что кто-то сказал, что это будет «решение» последней проблемы.

App.js:

      import logo from './logo.svg';
import Header from './Components/header.js';
import Routings from './Components/Routings.js';
import SessionStorage from './API/sessionstorage.js';
import Login from './Components/login.js'
import {BrowserRouter as Router} from 'react-router-dom';
import './App.css';

function App() {
 let href = ((window.location.href == 'http://localhost:3000/login') || (window.location.href == 'http://localhost:3000/register'));
 let component1;
 if(!href) component1 = <Header/>


  return (
    <Router>
      <div>
        <SessionStorage/>
        {/* {component1} */}
        {component1}
         <Routings/>
         </div>
    </Router>
  );
}

export default App;

index.js:

      import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {Container, Card, Button, Alert, CardGroup, CardDeck, FormControl, Form} from 'react-bootstrap';
import {getMovies2} from './API/callAPI';
import reactDom from 'react-dom';
import { isCompositeComponentWithType } from 'react-dom/test-utils';
import 'bootstrap/dist/css/bootstrap.min.css';
import testpicture from './imgs/maxresdefault.jpg';
import Movies from './Components/movies';


class RenderMovies extends React.Component {
  constructor(props) {
    super(props);
    this.state = {arr: [], arrTitle: [], renderedOutput: [], lastsearch: {value: '', succeed: true}};
    this.handleChange = this.handleChange.bind(this);
  }

  componentDidMount() {
    this.props.movies.then((movies) => {
      // this.setState({arr: movies.map((item) => {
      //  console.log(item.title);
      //  return item.title, item.description;
      //  })});
      this.setState({arr: movies.map((item) => {
        return [item.title, item.description];
        })});
        console.log(this.state.arr);
        this.setState({arrTitle: this.state.arr}, (() =>   {
          console.log(this.state.arrTitle);
          let item3 = this.state.lastsearch;
          console.log(item3.succeed);
          item3.succeed = false;
          console.log(item3.succeed);
          //console.log(item4);
        }));
      this.progress2()
     });
  }




  
  handleChange(event) {
    let search = (event.target.value).trim();
    let length = search.length;
    let last = this.state.lastsearch;
    let lastsearch = (last.value).trim();

   if(!length==0 && (lastsearch === '' || !(lastsearch.length <= length && search.substring(0, lastsearch.length).toUpperCase() === lastsearch.toUpperCase() && last.succeed === false))) {
     console.log("Aufruf***********************************************************************************************************************************************");
     this.setState({arrTitle: this.state.arr.filter((item, index) => {
       let temp = item[0];
        if(!temp.length<length && search.toUpperCase() === temp.trim().substring(0, length).toUpperCase()) {
          return item;
        }
    })}, (() =>  {
    last.value = search;
    last.succeed = (this.state.arrTitle.length > 0 ? true : false);
    this.progress2();
    }));
  } else if(length==0) {
    this.setState({arrTitle: this.state.arr}, (() => {
        this.progress2();
    }));
  }
  }

  progress2() {
    let rows = [];
    let movies = this.state.arrTitle;
    for(let i=0; i<this.state.arrTitle.length; i+=3) {
      rows.push(movies.slice(i, i+3));
    }
    console.log(rows);

    this.setState({renderedOutput: rows.map((item) => {
      return(<CardDeck>
        {item.map((item2, index) => {
          return (
          <Card> 
            <img src={testpicture}></img>
               <Card.Body>
           <Card.Title>{item2[0]}</Card.Title>
           <Card.Subtitle className="mb-2 text-muted">Card Subtitle</Card.Subtitle>
          <Card.Text>
           {item2[1]}  
           </Card.Text>
           <Card.Link href="#">Card Link</Card.Link>
           <Card.Link href="#">Another Link</Card.Link>
         </Card.Body>
      </Card>);
        })}
      </CardDeck>);
    })});
  }
  
  render() {
    //const element = [this.state.searchbar, this.state.renderedOutput];
    return(
      <><Form.Control type="input" placeholder="Search for a specific movie" onChange={this.handleChange}/>
       <div>{this.state.renderedOutput} </div>
      </>
    );
  }
}
//let element = [main(),  <RenderMovies movies={getMovies2()}/>];
ReactDOM.render(
 <React.StrictMode>
  <App/>
</React.StrictMode>,
document.getElementById("root")
);
reportWebVitals();

header.js:

routings.js:

      import React from 'react';
import { Navbar,Nav,NavDropdown,Form,FormControl} from 'react-bootstrap';
import { LinkContainer } from 'react-router-bootstrap';
import { BrowserRouter } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';

function Header() {
    return(
        <Navbar bg="dark" variant="dark" expand="lg" sticky="top">
        <Navbar.Brand to="/">React Bootstrap Navbar</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
        <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="mr-auto">
            <LinkContainer exact to="/"><Nav.Link>Home</Nav.Link></LinkContainer>
            <LinkContainer exact to="/movies"> <Nav.Link>Movies</Nav.Link></LinkContainer>
            <LinkContainer exact to="/contact-us"><Nav.Link>About Us</Nav.Link></LinkContainer>
            </Nav>
        </Navbar.Collapse>
    </Navbar>
    )
}

export default Header;

sessionStorage только вызывает API и сохраняет результат в sessionStorage.