使用路径参数反应路由器不起作用答案

【问题标题】：React Router with Path Params Not working使用路径参数反应路由器不起作用
【发布时间】：2019-10-12 17:03:09
【问题描述】：

我有一个具有以下配置的 react BrowserRouter。

<BrowserRouter>
        <div>
            <Switch>
                <Route path={`/`} component={Home} exact/>
                <Route path={`/about`} render={(props) => <About {...props}/>} exact/>
                <Route path={`/products/:id/:slug`} render={(props) => <Products {...props}/>} exact/>
            </Switch>
        </div>

在关于页面中有带有以下标签的产品。如果我单击一个链接，则 url 会更改并且产品页面会正确呈现。

<Link to={'/products/' + product.id + '/' + product.slug>{product.name }</Link>

但是当我使用确切的 URL 直接登陆到产品页面时。渲染不起作用。

 e.g localhost:3000/products/123/books

知道是什么导致了这个问题吗？

【问题讨论】：

您遇到了什么问题？你得到了 404 还是得到了哪个 pge？
@ducmai 我在控制台中收到“Uncaught SyntaxError: Unexpected token

标签： reactjs react-router react-router-v4

【解决方案1】：

根据您的描述，我认为当您在地址栏中输入主页时它工作正常，但是当您刷新页面或进入任何其他页面时，您会遇到一些错误。

解决办法如下：

首先：你需要在webpack.config.js中设置historyApiFallback: true，

devServer: {
  ...
  historyApiFallback: true,
}

其次：在webpack.config.js中设置publicPath的输出字段，：

output: {
  path: path.resolve(__dirname, 'dist'),
  filename: 'bundle.js',
  publicPath: '/',
},

我认为这个答案会对你有所帮助：React-router urls don't work when refreshing or writing manually

【讨论】：

【解决方案2】：

我相信你的问题是当你 tru 直接 url 时你得到错误 CANNOT GET。尝试在 webpack.config.js 中设置 historyApiFallback: true

【讨论】：

没错，直接登陆页面导致错误，试过你的建议，但没有运气。
你能分享你的 webpack 配置文件代码吗？？

【解决方案3】：

在你的产品组件中使用

如果组件是有状态的组件 this.props.match.params.id for id = 123 this.props.match.params.slug for slug = books

如果组件是无状态组件那么你需要使用“withRouter”来使上面的行可用从“react-router”导入 { withRouter };

并在这个方法中包装你的函数

const MyComponent = () => {} 导出默认 withRouter(MyComponent)

它应该可以工作！！！

【讨论】：

我已经为组件添加了 withRouter。 export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Products));
那么您现在可以访问 this.props.match.params.id 了吗？
Products组件是有状态组件吗？
是的，它是有状态的，我有 componentDidMount() { this.props.getProductData(this.props.match.params.id);} 在加载时获取数据。
你也可以使用componentDidUpdate()吗？

【解决方案4】：

要使“客户端虚拟”路由从任何 URL 工作，您需要服务器端支持 - f.e. apache mod-rewrite。

已经回复here

【讨论】：

【解决方案5】：

根据您的输入，我认为这是语法错误或组件中的 componentDidMount/useEffect 问题。

我想我发现了语法错误：“product.slug>”

您应该在 slug 之后删除“>”，您可能会很高兴！

【讨论】：

【解决方案6】：

根据我对这段代码的理解：

&lt;Link to={'/products/' + product.id + '/' + product.slug&gt;{product.name }&lt;/Link&gt;

将产生语法错误，因为它缺少右括号。

应该是这样的：

&lt;Link to={'/products/' + product.id + '/' + product.slug}&gt;{product.name }&lt;/Link&gt;

注意 product.slug 末尾的“}”

【讨论】：