Question

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

问题是我在反应中使用路由时，如果我重新加载页面，symfony路由模块发送'No Route Found >>

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

当我加载页面/管理员一切都很好，我点击链接转到/ admin / data，一切正常，反应动态发送给我，但现在当我刷新（F5）页面/ admin /数据，Symfony拦截它并尝试在其代码中找到路由并重定向到/ 404“No Route Found”。

我知道在AngularJs上，框架使用了ancors Path“localhost：// admin /＃/ data”，这似乎更容易管理但反应路由器使用“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总是catch / admin和react-router赶上＃/或＃/ admin / data

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

Answer 1

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

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

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

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

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

1 个答案: