在反应中带有参数的路线

Question

我使用的是BrowserRouter和Routes，参数为[xyz:id]，如下图所示。在本地主机中，这工作正常，但是当我在生产中部署时，页面无法打开xyz:id。请大家帮忙解决。我不想使用HashRouter，因为hash在生产中存在安全问题。

代码:

索引.js

 <Router basename="/my-app">
    <App />
  </Router>,

App.js

<Switch>
          <Route exact={true} path="/" component={Home} />
          <Route exact={true} path="/xyz/:id" component={MyPage} />
          <Route component={Invalid} />
        </Switch>

Answer 1

你需要将所有的请求路由到你的index.html文件。例如，如果你将你的应用程序部署到Apache Web服务器，你可以添加一个.htaccess文件到你的网站根目录，并在其中写下以下几行代码。

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /index.html [L,QSA]