Ошибка «Вы не должны использовать вне » в процессе производства, но при разработке она работает должным образом

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я получаю эту ошибку «Вы не должны использовать <Link> вне <Router> » Ошибка в рабочей среде после развертывания на heroku ….. но в разработке (localhost) она работает нормально.

Мой index.js файл

 import React from "react";
import ReactDOM from "react-dom";
import { createBrowserHistory } from "history";
import { Router, Route, Switch } from "react-router-dom";

import "./components/Layout/layout.css";

import indexRoutes from "routes/index.jsx";

import "assets/scss/material-kit-react.css?v=1.3.0";

let hist = createBrowserHistory();

ReactDOM.render(
  <Router history={hist}>
    <Switch>
      {indexRoutes.map((prop, key) => {
        return(
          <Route path={prop.path} key={key} component={prop.component} />
          );
      })}
    </Switch>
  </Router>,
  document.getElementById("root")
);
  

Мой файл routes / index.jsx

 import ContactUsPage from "views/ContactUsPage/ContactUsPage.jsx";
import AboutUsPage from "views/AboutUsPage/AboutUsPage.jsx";
import ServicePage from "views/ServicePage/ServicePage.jsx";
import ProjectsPage from "views/ProjectsPage/ProjectsPage.jsx";
import ComingSoonPage from "views/ComingSoonPage/ComingSoonPage.jsx"

import Home from "views/Home/Home.jsx";
import 'bootstrap/dist/css/bootstrap.css';

var indexRoutes = [
  { path: "/about-us", name: "AboutUsPage", component: AboutUsPage},
  { path: "/contact-us", name: "ContactUsPage", component: ContactUsPage},
  { path: "/services", name: "ServicePage", component: ServicePage},
  { path: "/projects", name: "ProjectsPage", component: ProjectsPage},
  { path: "/comingsoon", name: "ComingSoonPage", component: ComingSoonPage},
  { path: "/", name: "Home", component: Home}

];

export default indexRoutes;
  

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

1. Где ваши Link компоненты? Кроме того, component: {AboutUsPage} выглядит немного странно. Разве это не должно быть просто component: AboutUsPage ?

2. Компонента link нет, и в основном я использую a тег href для связывания.

3. Интересно. Итак, вместо этого вы выполняете жесткое обновление каждый раз при навигации? Используете ли вы какие NavLink -либо?

4. Да, я использую NavLinks

5. <NavLinks /> Используются вне каких-либо компонентов <Router> ? Это единственная причина, по которой это могло произойти.