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

Question

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

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

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

当我加载页面 /admin 时一切正常，我单击 link 转到 /admin/data，一切正常，反应动态发送给我，但现在当我刷新时（ F5) 页面/admin/data，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>

我的 link 在 /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 总是catch /admin 和 react-router catch #/ 或 #/admin/data

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

Answer 1

要使您的 AJAX 路由直接从 url 访问（即在浏览器 URL 中键入 /admin/data）而不被重定向到服务器端，您需要使您的基本路由（呈现您的 React 应用程序的 Symfony 路由）采用代表您的 AJAX 路由的参数。

为此，参数必须allow slashes，例如：

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

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

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

Symfony and React router, no route found

javascript

php

symfony

reactjs

react-router