【问题标题】：Single page application with Laravel-react使用 Laravel-react 的单页应用程序
【发布时间】：2020-08-09 21:59:29
【问题描述】：

我是第一次开发 laravel-react js 项目。选择 react 的原因是为了创建单页应用（SPA）。

要使用 react 设置我的 laravel 项目，我正在关注这篇文章

https://medium.com/@000kelvin/setting-up-laravel-and-react-js-the-right-way-using-user-authentication-1cfadf3194e

为了创建 SPA，我通过在我的 web.php 中写入这一行来为每个第一级 url 返回相同的视图

Route::view('/{path?}', 'index');

我还在我的 react 组件中创建了一些路由，如下所示

<Switch>
    <Route exact path="/" component={Home}/>
    <Route path="/login" component={Login}/>
    <Route path="/signup" component={Signup}/>
</Switch>

现在的问题是，当更改 url 时，它会用不同的组件刷新相同的视图。

我只是想在不刷新整个页面的情况下针对 url 呈现不同的组件，否则 SPA 的意义何在。

谁能告诉我满足我要求的正确方法，或者就像 Laravel 一样并做出反应。

【问题讨论】：

标签： reactjs laravel single-page-application

【解决方案1】：

使用路由器提供的链接组件

默认情况下，常规的a 标签总是会导致刷新。

您不能仅仅使用常规的 a 标签链接到另一个页面，您必须使用路由器中的 Link 组件。如果是反应路由器，这里是link

<Link
  to={{
    pathname: "/courses",
    search: "?sort=name",
    hash: "#the-hash",
    state: { fromDashboard: true }
  }}
/>

您还可以使用 useHistory 挂钩务实地进行路由。更详细的版本可以找到here

import { useHistory } from "react-router-dom";

function HomeButton() {
  let history = useHistory();
  // use history.push('/some/path') here
};

【讨论】：