javascript - Symfony 和 React 路由器，找不到路由

Question

我正在使用 Symfony3，我正在使用 React.js 创建一个包，并使用自身的 react-router。

问题是当我在 react 中使用路由时，如果我重新加载页面，symfony 路由模块会发送“找不到路由”

我的路由是索引页面的/admin 和下一页的/admin/data。

当我加载页面/admin 时一切正常，我单击链接转到/admin/data，一切正常， react 动态发送给我，但现在当我刷新 (F5) 页面/admin/数据，Symfony 拦截它并尝试在其代码中找到路由并重定向到/404“No Route Found”。

我知道在 AngularJs 上，框架使用的是 ancors 路径“localhost://admin/#/data”，这似乎更容易管理，但 react-router 使用“localhost://admin/data”

我的 symfony 路由:

admin:
  path: /admin
  defaults: { _controller: BiBundle:Admin:default }

我的 React 路由:

import { Router, browserHistory } from "react-router";

<Router history={browserHistory}>
  <Route path="/admin" component={App}>
    <IndexRoute components={{content: DashboardPage}} />
    <Route path="data/list"
      components={{content: DataListPage}} />
    <Route path="*"
      components={{content: _ => <h1>Page not found.</h1>}} />
  </Route>
</Router>

我在/admin 页面上的链接:

<Link to={'/admin/data/list'}>Data</Link>

我正在考虑修改我的 .htaccess 以将所有/admin/* 重定向到/admin，但对于这个问题来说似乎有点过分了。

我也在使用 Apache2 服务器。

编辑

我已经用 hashHistory 替换了 browserHistory

import { Router, hashHistory } from "react-router";

<Router history={hashHistory}>
  <Route path="/" component={App}>
    <IndexRoute components={{content: DashboardPage}} />
    <Route path="data/list"
      components={{content: DataListPage}} />
    <Route path="*"
      components={{content: _ => <h1>Page not found.</h1>}} />
  </Route>
</Router>

结果改变了我的路径，因为它在 AngularJs 中使用(或足够接近)，所以现在我有/admin#/和/admin#/data/list，所以 symfony 总是捕获/admin 和 react-router捕获#/或#/admin/data

你怎么看？这是好的方法吗？

Answer 1

为了使您的 AJAX 路由可以直接从 url 访问(即在浏览器 URL 中键入 /admin/data)而不被重定向到服务器端，您需要创建您的基本路由(呈现的 Symfony 路由)你的 React 应用程序)接受一个代表你的 AJAX 路由的参数。

为此，参数必须 allow slashes , 例子:

admin:
    path: /admin/{reactRouting}
    defaults: { _controller: BiBundle:Admin:default, reactRouting: null }
    requirements:
        reactRouting: ".+"

对于更复杂的路由，您应该查看 FOSJsRoutingBundle这可以帮助你。