Question

我正在尝试学习react-router-dom（反应路由器版本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>

现在如果运行我的网页并点击链接＆＃34;产品1的详细信息＆＃34;我展示了一个测试＆＃34;产品＆＃34;我返回的组件＆＃34;产品编号1＆＃34; （撰写来自props.match.params.number的文本阅读）然后，如果我点击链接＆＃34;产品2的详细信息＆＃34;它仍然显示我＆＃34;产品编号1＆＃34;！

如果它以＆＃34; product＆＃34;开头，那么这条路线似乎不会改变。如果我点击＆＃34; home＆＃34;链接然后在＆＃34;产品2详细信息＆＃34;然后它刷新和工作。
我希望能够强制刷新产品页面，是否可能？
提前致谢

Answer 1

正如您在下面的代码段中所看到的，它可以按照您的意愿运作。

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

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

＆＃13;

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'));

＆＃13;

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

＆＃13;

Answer 2

如果您在构造函数或Product生命周期方法中访问并存储number参数，那么在没有看到您的componentWillMount组件的情况下很难回答 - 当路由更改时，这些将不再执行你没有加载一个新的组件，尽管＆＃34; new＆＃34;路线。 React只是更新发送到Product组件的当前实例的道具。

尝试直接在Product number X组件Product功能中呈现render，如下所示：

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

如果您希望将其存储在组件状态或实例属性中，请在其中一个生命周期方法中查找它，例如componentWillReceiveProps。

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

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

3 个答案: