Question

我们使用Laravel编写了一个用PHP编写的NON SPA，我们只在几页内使用了React。

我面对以下情况：我必须创建2个视图：

/admin/Locations
/admin/UserGroups

如果用户输入浏览器网址 http://localhost/admin/locations ，服务器将重定向到/ admin / locations页面，但是，我只想呈现<Locations/>组件。

另一方面，如果用户尝试访问 http://localhost/admin/userGroups ，服务器将重定向到/ admin / userGroups页面，并且需要仅呈现<UserGroups/>组件。

为了构建这个应用程序，我创建了一个名为EngagementTrackerApp.js的文件（这是模块的名称）。在EngagementTrackerApp.js中，我有以下代码：

render(
    <BrowserRouter>
        <Route path="/admin/locations" component={Locations} history={browserHistory} />   
        <Route path="/admin/userGroups" component={UserGroups} history={browserHistory}/>   
    </BrowserRouter>,
    document.getElementById('view')
);

在每个页面（Locations.blade.php和UserGroups.blade.php）中，我有一个名为<div id="view"></div>的 div 。

它不是以这种方式工作，但为了让它工作，我需要删除其中一条路线。

例如。如果我删除路线位置，则用户可以通过网址 http://localhost/admin/userGroups 访问用户组视图：

<BrowserRouter>
    <Route path="/admin/et/userGroups" component={UserGroups} history={browserHistory}/>   
</BrowserRouter>

但是，如果我把两条路线放在一起就停止工作：

<BrowserRouter>
    <Route path="/admin/et/locations" component={Locations} history={browserHistory} />   
    <Route path="/admin/et/userGroups" component={UserGroups} history={browserHistory}/>   
</BrowserRouter>

我的 div 视图始终为空白。

我该怎么做，或者，为什么它只适用于一条路线？

Answer 1

您无法在BrowserRouter内指定多条路线。你必须将它们包装在div

中

render(
    <BrowserRouter>
        <div>
        <Route path="/admin/locations" component={Locations} history={browserHistory} />   
        <Route path="/admin/userGroups" component={UserGroups} history={browserHistory}/> 
        </div>  
    </BrowserRouter>,
    document.getElementById('view')
);

在非SPA

1 个答案: