Question

我在我的create-react-app中使用react路由器进行路由。使用“ npm start”（“ react-scripts start”），所有路由均按预期工作。

但是，现在我想部署我的应用程序，因此运行“ npm run-scripts build”（“ react-scripts build”）。之后，我运行“ serve -s build”以启动Web服务器。在此版本的Web应用程序中，静态路由有效，而动态路由无效。

一个静态路由配置示例如下所示。该路由在react应用程序的dev模式和build模式下均有效。示例网址：“ http://localhost:5000/dashboard/viewData”。

{
    path: "/dashboard/viewData/",
    component: withAuth(CrosstabTest),
    exact: false
}

以下路线是动态的，不起作用。但是，我的猜测是它不是由于“：processFlowItemId”而是由于其他URL参数。示例网址：“ http://localhost:5000/dashboard/definition/1?id=0744a761-111c-446c-9bb5-2763c5c8bb04”。

{
    path: "/dashboard/definition/:processFlowItemId",
    component: withAuth(DefinitionContainer),
    exact: false
}

当我运行示例URL时不带“？id = 0744a761-111c-446c-9bb5-2763c5c8bb04”时，应用程序会加载该组件，但由于缺少id参数，我收到了错误消息。但这至少表明该路由总体上正常运行，但参数存在问题。当打开包含id字段的完整示例URL时，该组件似乎根本没有加载（这意味着react-router无法将URL识别为路由中定义的模式的实例。

如前所述，仅在使用应用程序的生成版本时才会出现此问题。

编辑：

下面我将更详细地描述代码：

我的路线有一个配置：

export const mainRoutes: any = [
    {
        path: "/dashboard/",
        component: Dashboard,
        exact: false
    },
]

export const dashboardRoutes: any = [
    {
        path: "/dashboard/viewData/",
        component: withAuth(CrosstabTest),
        exact: false
    },
    {
        path: "/dashboard/definition/:processFlowItemId",
        component: withAuth(DefinitionContainer),
        exact: false
    },
]

主要路线（“ mainRoute”）显示在此处：

import { mainRoutes } from './routes/routes'
import { Switch, BrowserRouter, Route } from 'react-router-dom'

class App extends React.Component<any> {

  public render() {

    return (
        <BrowserRouter>
          {mainRoutes.map((route: any, i: number) => (
            <Switch key={i}>
              <Route key={i} path={route.path} component={route.component} exact={route.exact} />
            </Switch>
          ))
          }
        </BrowserRouter>
    )
  }
}

export default App

在“仪表板”组件（“仪表板”）中，我呈现了一条子路由：

import { Switch, Route } from 'react-router-dom'
import { dashboardRoutes } from '../../routes/routes'

...
dashboardRoutes.map((route: any, i: number) => (
                            <Switch key={i}>
                                < Route exact={true} key={i} path={route.path} render={(props) => {
                                    return <route.component key={i} {...props} />
                                }} />
                            </Switch>
                        ))
...

Answer 1

我遇到了同样的问题，并通过将BrowserRouter替换为HashRouter来解决了

动态路由无法在我的React应用的构建版本中使用

1 个答案: