React bootstrap web не загружается при добавлении компонента навигации для маршрутизации

Switch — это не ссылка на компонент, а решение о том, что должно отображаться в этом пространстве.

Представьте, что это (псевдокод)

switch(path){ 
  case "path1": route(Component1); break; 
  case "path2": route(Component2); break;
  default: route("*"); break;

Поэтому поместите компонент (или на самый высокий уровень, где вы выполняете ветвление на основе пути), а не навигацию.

Способ, который мы сделали (с помощью react-bootstrap) в наших приложениях, следующий:

// App.js
import Navigation from "./Navigation";

import Facilities from "./Facilities" .. and so on

const App = ({}) => {
  return 
    <Navigation />
    <Switch> 
      <Route path="/facilities" component={Facilities}/>
      <Route path="/rooms" component={Rooms}/>
    </Switch>
}

// Navigation.js
import Link from "react-bootstrap/Link";

const Navigation = () => {
    <div>
      <Link to="/facilities"/>
      <Link to="/rooms"/>
    </div>
   
}

Если компонент App является компонентом App по умолчанию после создания приложения React с помощью команды npx create-react-app ..., я предлагаю вам не использовать другое имя App для других файлов в вашем проекте.

Но если вы хотите использовать компонент Navigation в качестве корневого компонента, вы можете попробовать следующее:

Вариант 1:

index.js

import ReactDOM from "react-dom";

import Navigation from "./Navigation ";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Navigation /> 
  rootElement
);

Navigation.js

import React from 'react'
import Facilities from './Facilities'
import Room from './Room'
import Booking from './Booking'
import Contact from './Contact'
import App from '../App'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

const Navigation = () => {
    return (
        <Router>
            <Switch>
                <Route path="/facilities">
                    <Facilities/>
                </Route>
                <Route path="/room">
                    <Room/>
                </Route>
                <Route path="/contactus">
                    <Contact/>
                </Route>
                <Route path="/bookingRoom">
                    <Booking/>
                </Route>
                <Route path="/">
                    <App/>
                </Route>
            </Switch>
        </Router>
    )
}
export default Navigation

Вариант 2:

index.js: добавьте BrowserRouter as Router из react-router-dom здесь

ReactDOM.render(
  <Router>
    <Navigation /> {/* put the Navigation component here */}
  </Router> 
  rootElement
);

Navigation.js: удалить BrowserRouter as Router из react-router-dom здесь

return (
  <Switch>
      <Route path="/facilities">
          <Facilities/>
      </Route>
      <Route path="/room">
          <Room/>
      </Route>
      <Route path="/contactus">
          <Contact/>
      </Route>
      <Route path="/bookingRoom">
          <Booking/>
      </Route>
      <Route path="/">
          <App/>
      </Route>
  </Switch>
)