Блог

Главная - Вопросы по программированию - Веб-загрузчик React не будет загружаться при добавлении компонента навигации для маршрутизации

Веб-загрузчик React не будет загружаться при добавлении компонента навигации для маршрутизации

#javascript #reactjs #bootstrap-4 #react-router

Вопрос:

Здравствуйте, ребята, поэтому я пытаюсь создать веб-приложение с помощью react-bootstrap и использовать BrowserRouter для связи каждого из компонентов, которые у меня есть. Я уже обертываю индекс JS с помощью BrowserRouter и уже добавляю переключатель и тег маршрута в компонент навигации, но когда я попытался реализовать навигацию в 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

Ответ №1:

Если 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>
)

Комментарии:

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

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

Ответ №2:

Переключатель-это не ссылка на компонент, а решение о том, что должно быть отображено в этом пространстве.

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

 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>
   
}
Метки: