React路由器不理解路径变量？

Question

我有一个在 Amazon S3 存储桶中运行的 react 应用程序，它可以在这里找到：这是应用程序的主页，用户可以在搜索栏中搜索船舶。

应用程序会在下拉菜单中生成一个链接，如下所示：

但是，当用户单击链接时，您不会看到详细信息页面，但用户会被重定向到没有 CSS 的该页面。

本地一切正常。

我的路由组件如下所示：

export class Routes extends React.Component {
render() {
    return (
        <div>
            <Route exact path={HOME_PAGE} component={Home}/>          
            <Route path={HOME_PAGE + "/details/:id"} component={Details}/>
            <Route path={HOME_PAGE + "/form/:mode"} component={Edit}/>
            <Route path={HOME_PAGE + "/form/:mode/:id"} component={Edit}/>
            <Route path={HOME_PAGE + "/csvForm"} component={CsvForm}/>
        </div>
    );
  }
}

我为HOME_PAGE 路径构建了一个前缀，如下所示：

export const HOME_PAGE = (ENVIRONMENT == "DEVELOPMENT") ? "" : "/url"

这将为开发或生产环境设置主页路径。

我正在考虑另一种将船舶 ID 传递到详细信息页面的方法，可能使用 GET 参数。所以路线看起来像这样HOME_PAGE + /details?id=5c335682379b4d7a6ea454a8。

但我不知道react-router是否支持那种参数，也许有人有更好的解决方案来解决这个问题。只是通过在网站上玩耍，我希望我已经提供了足够的信息来了解网站的结构。

Answer 1

如果您使用的是 react router v4，对于您定义的每个 Route，react-router 将传递三个 props：

• 匹配
• 位置
• 历史

如果您想访问params（位于/:someParams 下），可以使用match.params.someParams 访问Match 属性

如果您更喜欢查询字符串，您可以通过使用location.search 来使用Location 属性，这是一个字符串，因此在您的情况下它将返回?id=5c335682379b4d7a6ea454a8。您必须使用 qs 处理字符串以获得您的 id 值。

您可以在这里查看详细信息：https://reacttraining.com/react-router/core/api/Route/route-props

所以在你的情况下，这将是解决方案：

在你的父母身上

<Route path={HOME_PAGE + "/details"} component={Details}/>

你的Details 组件

import qs from 'query-string'

const Details = ({location}) => {
  const {search} = location
  const queries = qs.parse(search) // you should have the query string object
  return (
    <div>{queries.id}</div>
  )
}