无法使用 react-router 刷新或手动写入 url

Question

我使用 BrowserRouter 和他的基本名称，我的服务器是 WINSCP，路由正常工作但是，当我刷新它或手动写入它时，我得到：

我的 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/

我该如何解决？

Answer 1

发生这种情况的原因是您的服务器在您点击 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>
    );
  }
}

显然，不要忘记从 'react-router-dom' 导入 HashRouter。

您可以在此处查看其他方法：

无法使用 react-router 刷新或手动写入 url

Cannot refresh or writing manually the url with react-router

deployment

winscp

reactjs

react-router

react-router-dom