#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>
? Это единственная причина, по которой это могло произойти.