反应中具有参数的路线

我正在使用带有参数[xyz /:id]的BrowserRouter和Routes,如下所示。在本地主机中,这工作正常,但是当我在生产环境中部署页面时,无法打开xyz /:id。请帮助解决。 我不想使用HashRouter,因为哈希具有与生产中的安全性相关的问题。

片段:

Index.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>
评论
  • 相思浓
    相思浓 回复

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

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