时间戳

首页 > 解决方案 > 使用 Laravel-react 的单页应用程序

reactjs - 使用 Laravel-react 的单页应用程序

问题描述

我是第一次开发 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');

我还在我的反应组件中创建了一些路线，如下所示

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

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

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

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

标签： reactjslaravelsingle-page-application

解决方案

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

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

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

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

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

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

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

推荐阅读