部署后反应路由器不起作用

Question

我在 Google Cloud Platform 上部署了一个 react-app： https://just-palace-214904.appspot.com/

但是只有第一页显示并且超链接不起作用。当我在 localhost 上运行应用程序时，它们运行良好。以下是我的设置：

index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter, Route, Switch} from 'react-router-dom'
import SignIn from './components/SignIn';
import SignUp from './components/SignUp';
import ForgotPass from './components/ForgotPass';

ReactDOM.render((<BrowserRouter>
  <Switch>
    <Route exact={true} path="/" component={SignIn}/>
    <Route path="/signup" component={SignUp}/>
    <Route path="/forgot" component={ForgotPass}/>
  </Switch>
</BrowserRouter>), document.getElementById('root'));

我的超链接：

<a href="/forgot">Forgot password?</a><br/>
<a href="/signup">Create account</a>

Answer 1

您应该使用Link 而不是锚标记。

改变

 <a href="/forgot">Forgot password?</a><br/>
 <a href="/signup">Create account</a>

到

<Link to="/forgot">Forgot Password?</Link><br/>
<Link to="/signup">Create account</Link>

Link 来自 react-router-dom 包。

这是一个工作示例。 https://codesandbox.io/s/qz4l7nzv09

Answer 2

我不知道为什么，我之前遇到过类似的问题，使用HashRouter 效果很好，而不是使用BrowserRouter：

import { HashRouter } from 'react-router-dom'

---

啊，我找到了一个解释它们之间差异的博客here。

BrowserRouter 应该用于处理动态请求的服务器（知道如何响应任何可能的 URI），而HashRouter 应该用于静态网站（服务器只能响应请求它知道的文件）。