Маршрутизатор React не работает на стороне клиента.Как мне это исправить? - PullRequest
0 голосов
/ 13 октября 2018

Я использую React Browser Router в качестве модуля npm (act-router-dom) с приложением create-response-app.Маршрутизация работает нормально на локальных, но не после развертывания. При нажатии на ссылку я не попадаю в нужное место (например / начало).Страница не найдена.

Я посмотрел этот совет, но он все еще не работает.

Я не использую Heroku и не знаю, стоит ли мне это делать.

Вот некоторые фрагменты кода из моего реагирующего App.js:

import { BrowserRouter, Route, Switch } from "react-router-dom";

import Home from "./Components/Home.jsx";
import Billigast from "./Components/Billigast";
import NoMatch from "./Components/NoMatch";
import Start from "./Components/Start";

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <NavBar />
          <Switch>
            <Route path="/" component={Home} exact />
            <Route path="/start" component={Start} />
            <Route component={NoMatch} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

static.json:

{
  "root": "/",
  "clean_urls": false,
  "routes": {
    "/**": "index.html"
  }
}

Я пробовал несколько "root": местоположений.Мой файл index.html находится в корне .

Вот одна из связанных страниц:

import React from "react";
import NavBar from "./NavBar";
import Form from "./Form";

const Start = () => {
  return (
    <div>
      <Form />
    </div>
  );
};

export default Start;

Спасибо за любую помощь!

1 Ответ

0 голосов
/ 13 октября 2018

Я был , а не , должным образом импортировав реагирующий маршрутизатор NavLink.Я импортировал NavLink, но из реактивной ленты.

Исправление (в компоненте NavBar) :

import { NavLink as RouterNavLink } from "react-router-dom";

, так как используются и responsestrap, и response-router-domодно и то же имя (NavLink), и я хотел использовать оба из-за дизайна.

Затем я обернул RouterNavLink внутри NavLink следующим образом:

<NavLink>
  <RouterNavLink to="/start">Start</RouterNavLink>
</NavLink>

Не удивительно, что он не работал, так как я даже не импортировал правильно.

Кроме того, мне не нужен файл static.json.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...