Question

我在Google Cloud Platform上部署了一个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

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

当您拥有处理动态请求的服务器（知道如何响应任何可能的URI）时，应使用BrowserRouter，而对于静态网站（服务器应在其中使用HashRouter）只能响应对它知道的文件的请求。

部署后，React路由器不起作用

2 个答案: