反应路由器4，带参数的路径答案

【问题标题】：React router 4, path with parameter反应路由器4，带参数的路径
【发布时间】：2017-12-15 17:31:42
【问题描述】：

我正在尝试学习 react-router-dom（react 路由器版本 4.x）。
我不理解带参数的路由的行为，我举了一个简单的例子。
我有一个已定义路线的链接列表，如下所示：

<li>Link to='/'>Home</Link></li>
<li>Link to='/product/1'>Product 1 details</Link></li>
<li><Link to='/product/2'>Product 2 details</Link></li>

我有一个这样的路由定义：

<Switch>
    <Route exact path='/' component={Home}/>
    <Route path='/product/:number' component={Product}/>
</Switch>

现在，如果运行我的网页并单击链接“产品 1 详细信息”，我会显示一个测试“产品”组件，其中返回“产品编号 1”（从 props.match.params.number 中读取文本）。
然后，如果我单击链接“产品 2 详细信息”，它仍会显示“产品编号 1”！

如果它以“产品”开头，似乎路线不再改变：如果我单击“主页”链接，然后单击“产品 2 详细信息”，则它会刷新并正常工作。
我希望能够强制刷新产品页面，可以吗？
提前致谢

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

正如您在下面的 sn-p 中看到的那样，它可以按您的意愿工作。

您是否将 Switch 组件封装在路由器中？（HashRouter 或 BrowserRouter）这似乎是问题所在。

即使我在 Product 上重复 Home 组件并单击相同的链接，应用程序的行为也应如此。（顺便说一句，不要在 Product 组件上重复 Home 组件，这是一种示例）

const Home = () => (
  <ul>
    <li><ReactRouterDOM.Link to='/'>Home</ReactRouterDOM.Link></li>
    <li><ReactRouterDOM.Link to='/product/1'>Product 1 details</ReactRouterDOM.Link></li>
    <li><ReactRouterDOM.Link to='/product/2'>Product 2 details</ReactRouterDOM.Link></li>
  </ul>  
);

const Product = props => (
  <div>
    <Home />
    <p>{props.match.params.number}</p>
  </div>
);

const App = () => (
  <ReactRouterDOM.HashRouter>
    <ReactRouterDOM.Switch>
      <ReactRouterDOM.Route exact path='/' component={Home}/>
      <ReactRouterDOM.Route path='/product/:number' component={Product}/>
    </ReactRouterDOM.Switch>
  </ReactRouterDOM.HashRouter>
);

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://unpkg.com/react-router/umd/react-router.min.js"></script>
<script src="https://unpkg.com/react-router-dom/umd/react-router-dom.min.js"></script>

<div id="root"></div>

【讨论】：

@girtri 您的应用是否响应这些路由？因为如果你没有后端来支持这些路由，你必须使用 HashRouter
我没有反手。我正在编写一个单页应用程序，它通过休息服务加载数据，然后加载带有 json 数据的页面。现在有了 HashRouter 就可以了！谢谢！所以..对于这种类型的网络应用程序使用浏览器路由器是错误的
@girtri 然后你应该像我在我的例子中展示的那样使用 HashRouter

【解决方案2】：

如果没有看到您的 Product 组件，这很难回答——如果您在构造函数或 componentWillMount 生命周期方法中访问和存储 number 参数，由于您没有加载，因此当路由发生更改时，它们将不会再次执行尽管有“新”路线，但还是一个新组件。 React 只是简单地更新发送到 Product 组件的当前实例的 props。

尝试直接在您的Product 组件render 函数中渲染Product number X，如下所示：

<span>Product number { this.props.match.params.number }</span>

如果您想将其存储在组件状态中或作为实例属性，请在其他生命周期方法之一中查找它以更新，例如 componentWillReceiveProps。

【讨论】：

【解决方案3】：

这里的产品组件：

import * as React from 'react';

export default class Product extends React.Component<any, any>
{
    render() {
        return (
            <div>
                Product number { this.props.match.params.number}
            </div>
        );
    }
}

【讨论】：