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

avatar
Kim San
9 августа 2021 в 03:24
57
2
0

Здравствуйте, ребята, я пытаюсь создать веб-приложение с помощью react-bootstrap и использовать BrowserRouter для связывания каждого имеющегося у меня компонента. Я уже оборачиваю индексный JS с помощью BrowserRouter и уже добавляю теги Switch и Route в компонент навигации, но когда я попытался реализовать навигацию в app.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 { Route, Switch } from 'react-router-dom'

const Navigation = () => {
    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>
        </>
    )
}

export default Navigation

Источник

Ответы (2)

avatar
Jayaram Kasi
9 августа 2021 в 05:28
0

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>
   
}

avatar
Jabal Logian
9 августа 2021 в 03:48
0

Если компонент 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>
)
Kim San
9 августа 2021 в 04:05
0

привет, спасибо за ответ, у меня был тот же код, что и в варианте 2, и я попытался изменить свой локальный хост на один из путей, но он не подтолкнул Интернет к указанному пути, почему это? локальный хост: 3000/объекты

Jabal Logian
9 августа 2021 в 05:14
0

Я обновил свой ответ (поместил компонент Navigation внутрь index.js). пожалуйста, чек