Question

我用React和React-router v4构建了一个小问卷。我用create-react-app开发了。当我将它构建为独立页面时，它工作正常。路由器路由就像我想要的那样。

但是现在我在Mahara（https://mahara.org/）和另一个用于Wordpress的页面上构建了一个页面。

在Mahara，它是一个插件，调查问卷是Mahara页面的一部分。在Wordpress中，调查问卷是整个Wordpress页面的一部分。

在两种变体中，路由器都不起作用。找不到路径“/”。因此，将显示默认的“未找到”页面。

我编辑了package.json中的homepage属性和BrowserRouter的basename属性。

当React应用程序不是独立页面时，通常是否可以使路由器正常运行？

也许问题是，在两个平台（Mahara / Wordpress）中，网址实际上并不是问卷的存在？

例如，在mahara中，调查问卷存在于“http://mahara_17_10.local/blocktype/learningstyle/js/build/”中，但网址显示：“http://mahara_17_10.local/view/view.php?id=3842”。这个公共页面是用Smarty模板和一些php生成的。

我尝试了两个：React构建文件夹所在的真实位置或生成的url（第二个）。但到目前为止我没有运气。

这里有一些代码： package.json：

"homepage": "http://mahara_17_10.local/view/view.php?id=3842",

BrowserRouter：

<BrowserRouter basename="/view/view.php?id=3842">

主要组件中的路由器：

<div className={ApplicationClassNames}>
                    <ApplicationHeader
                        title={title}
                        count_blocks={count_blocks}
                        number_of_blocks_overall={number_of_blocks_overall}
                    />
                    <Switch>
                        <Route exact path='/' render={() => (
                        <ApplicationBody
                            page_now={page_now}
                            count_cats={count_cats}
                            count_pages={count_pages}
                            categories_pages_quantity={categories_pages_quantity}
                            catValuesCountAll={catValuesCountAll}
                            language={language}
                            show_result={false}
                            values_not_for_categories={values_not_for_categories}
                        />
                        )}/>
                        <Route path='/wtf' component={Result} />
                        <Route><div>Not found</div></Route>
                    </Switch>
                </div>

所以我的问题是：

1：当React应用程序不是独立页面时，通常是否可以使路由器正常运行？

如果是，如何在wordpress或mahara中进行抽样。也许有人知道一些教程或其他可以帮助我的东西。

如果有人能在这里帮我一点，我会很高兴的。 thanx =）

Answer 1

@Learner

例如，如果您在公共页面上有Moodle插件（作为反应应用程序），则网址为：moodlepage.de/mod/learningstyle/view.php？id = 27 您可以将.htaccess文件放在moodle的根文件夹中，其中包含以下内容：

Options -MultiViews
RewriteEngine On
RewriteRule ^mod/learningstyle/view.php/(.*)$ /mod/learningstyle/view.php?id=27 [QSA,L]

当您为eyample键入mod / learningstyle / view.php / green时，这会告诉网络服务器查看/mod/learningstyle/view.php?id=27。所以页面被调用，并且反应的URL与参数有关。

这是htaccess的最小配置。你可以把重写条件和其他一些东西放在那里。但这很有效。（。*）$用于路由器参数。他们也工作。确保您的虚拟主机中有Allowoverride All，或者您拥有Web服务器的设置。这在moodle和mahara中效果很好。 Worpress有自己的htaccess和一些rewriterules，所以它对我没用。见这里：

React Router v4 and htaccess with wordpress

在嵌入式React应用程序中使用React Router v4进行路由

1 个答案: