React Router不了解路径变量？

Question

我有一个在Amazon S3存储桶中运行的react applicatie，可在此处使用：这是应用程序的主页，用户可以在搜索栏中搜索船。

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

但是，当用户单击链接时，您不会看到详细信息页面，但是该用户将被重定向到没有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"

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

我正在考虑另一种方式，将船号传递给详细信息页面，也许带有GET参数。因此路线看起来像这样HOME_PAGE + /details?id=5c335682379b4d7a6ea454a8。

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

Answer 1

如果您使用的是React Router v4，则对于您定义的每个路由，react-router都会传递三个道具：

• 匹配
• 位置
• 历史

如果您想访问params下的/:someParams，可以使用Match

访问match.params.someParams道具。

如果您更喜欢查询字符串，则可以使用Location来使用location.search道具，?id=5c335682379b4d7a6ea454a8是一个字符串，因此在您的情况下它将返回qs。您必须使用id处理字符串以获取<Route path={HOME_PAGE + "/details"} component={Details}/> 值。

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

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

在您的父母身边

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> ) } 组件

UITableView