Невозможно обновить или записать URL-адрес вручную с реакции-маршрутизатором - PullRequest
Новая
       36

Невозможно обновить или записать URL-адрес вручную с реакции-маршрутизатором

2 голосов
/ 20 сентября 2019

Я использовал BrowserRouter с его базовым именем, мой сервер - WINSCP, маршруты работают правильно, но когда я обновляю его или пишу вручную, я получаю:

enter image description here

Мой App.js: 

import React, { Component } from 'react';
import { Route, Switch, BrowserRouter} from "react-router-dom";
import {  BackTop } from 'antd';
import Header from './components/Header/Header';
import Agenda from './components/Agenda/Agenda';
import Planning from './components/Planning/Planning';
import CreerActivite from './components/CreerActivite/CreerActivite';
import TypesRDV from './components/TypesRDV/TypesRDV';


class App extends Component {
  render() {
    return (
      <div>
        <BrowserRouter  basename="/ReactCalendar">
          <Header/>
          <Switch>
            <Route exact path="/" component={Planning} />

            <Route exact path="/creerActivite" component={CreerActivite} />
            <Route exact path="/typesRDV" component={TypesRDV} />
          </Switch>
        </BrowserRouter>
        <BackTop />
      </div>
    );
  }
}
export default App;

В моем package.json у меня есть "homepage": "https://dev/ReactCalendar", а моя папка на WINSCP /dev/ReactCalendar/

Как я могу это исправить

1 Ответ

2 голосов
/ 20 сентября 2019

Причина, по которой это происходит, заключается в том, что ваш сервер не знает, что обслуживать, когда вы нажимаете этот URL.Есть несколько подходов к решению вашей проблемы.Я предложу самый простой подход здесь.

Замените BrowserRouter на HashRouter. 

class App extends Component {
  render() {
    return (
      <div>
        <HashRouter  basename="/ReactCalendar">
          <Header/>
          <Switch>
            <Route exact path="/" component={Planning} />

            <Route exact path="/creerActivite" component={CreerActivite} />
            <Route exact path="/typesRDV" component={TypesRDV} />
          </Switch>
        </HashRouter>
        <BackTop />
      </div>
    );
  }
}

И, конечно же, не забудьте импортировать HashRouter из 'response-router-dom'.

Другие подходы можно посмотреть здесь: URL-адреса React-маршрутизатора не работают при обновлении или записи вручную

...