使用 Laravel-react 的單頁應用程序

Question

我是第一次開發 laravel-react js 項目。 選擇 react 的原因是為了創建單頁應用程序（SPA）。

要使用反應設置我的 laravel 項目，我正在關注這篇文章

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

要創建 SPA，我通過在我的 web.php

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 和反應一樣。

Answer 1

使用路由器提供的鏈接組件

默認情況下，常規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
};