React router 4，带参数的路径

Question

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

<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>

现在，如果运行我的网页并单击 link "Product 1 details" 我会显示一个测试 "Product" 组件，其中我 return "Product number 1" （撰写文本阅读 props.match.params.number）。
然后如果我点击 link "Product 2 details" 它仍然显示 "Product number 1"!

如果路由以 "product" 开头，它似乎不再改变：如果我点击 "home" link 然后点击 "Product 2 details" 然后它刷新并工作。
我希望能够强制刷新产品页面，可以吗？
提前致谢

Answer 1

如果没有看到您的 Product 组件，这很难回答——如果您在构造函数或 componentWillMount 生命周期方法中访问和存储数字参数，这些将不会在路由时再次执行尽管有 "new" 路线，但您没有加载新组件。 React 只是更新发送到 Product 组件的当前实例的道具。

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

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

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

Answer 2

正如您在下面的代码片段中看到的那样，它可以如您所愿地工作。

你有没有把Switch组件封装到Router中？（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>

Answer 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>
        );
    }
}

React router 4，带参数的路径

React router 4, path with parameter

reactjs

react-router

react-router-dom