部署后反应路由器不工作

Question

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

但是只显示第一页并且超链接不起作用。当我运行本地主机上的应用程序时，它们工作正常。以下是我的设置：

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

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

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

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

The BrowserRouter should be used when you have a server that will handle dynamic requests (knows how to respond to any possible URI), while the HashRouter should be used for static websites (where the server can only respond to requests for files that it knows about).

Answer 2

您应该使用 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

部署后反应路由器不工作

React router doesn't work after deploying

javascript

reactjs

google-cloud-platform

react-router-v4