Laravel-react 的单页应用程序

Question

我是第一次开发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 并做出反应。

Answer 1

使用路由器提供的 Link 组件

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

您不能只 link 到另一个带有常规 a 标签的页面，您必须使用路由器中的 Link 组件。如果它是 React 路由器，这里是 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
};

Laravel-react 的单页应用程序

Single page application with Laravel-react

laravel

single-page-application

reactjs

使用路由器提供的 Link 组件