Laravel 路由和刀片模板与 reactjs答案

【问题标题】：Laravel routes and blade templating with reactjsLaravel 路由和刀片模板与 reactjs
【发布时间】：2015-07-12 12:36:56
【问题描述】：

有没有什么方法可以使用刀片类型语法和 React 来处理我的 Laravel 路由？假设我有以下内容：

<div class="card">
    <a href="{{ route('account.show', $user->slug) }}">Go to your account</a>
</div>

如果我尝试把它变成一个 Reactjs 组件，显然刀片类型语法将不起作用。

我已经研究过 React Router，但不完全知道它如何适合我的应用程序，或者我是否有必要使用它（我宁愿使用普通的 Laravel路线）。

【问题讨论】：

RE react-router，它主要是一个客户端路由器，所以你只需要它用于单页应用程序。如果硬页面加载对您正在做的事情有意义（例如博客，但不是电子邮件客户端），那么您不需要客户端路由器。

标签： php laravel routes reactjs blade

【解决方案1】：

React 代码不是由 Laravel 执行，而是由用户的浏览器执行。因此，当需要在用户的浏览器中生成该 href 时，代码将无法再访问 Laravel 或 Blade 工具。

当您使用刀片生成顶级 React 调用时，您可以做的是预先将您需要的所有信息传递给您的 React 应用程序：

<script>
    React.render(
        MyApp({
            accountShow: "{{ route('account.show', $user->slug) }}",
            //etc.
        }),
        document.getElementById('myContainer')
    )
</script>

那么在你的 React 应用程序中你可以使用这些属性并将它们传递给内部组件，例如：

<CardLink href={this.props.accountShow}>
    Go to your account
</CardLink>

【讨论】：

这可行，但这是可扩展的，还是有更好的方法来做到这一点？不过现在可以正常使用了，谢谢！
或者，您可以安装laroute 包。它将生成一个 laroute.js 文件，您可以将其包含在您的页面中并用于从 React 生成这样的路由：laroute.route('hello.{planet}', {planet : 'world'}) 请记住，如果您需要一些模型值，例如 $user->slug，您仍然必须将它们传递给Javascript，可以作为顶级道具（如我所展示）或作为全局 Javascript 常量（实际上是变量）。