如何使用 <Link> 反应路由器？答案

【问题标题】：How to use <Link> react router?如何使用 <Link> 反应路由器？
【发布时间】：2018-03-07 09:13:57
【问题描述】：

我正在使用 reactjs 和 react 路由器。我已将路由器创建为：

ReactDOM.render(
  <Router history={browserHistory}>  
    <Route exact path="/" component={App} />
    <Route path="/:id" component={User} />
  </Router>,
  document.getElementById('root')
);

在 App 组件中，我有一个指向 "/:id" 路径的链接：

<Link to={'/'+id} >

当我在“/”路径中时，我的视图工作正常，但现在当我点击我的链接时，路径会改变，我的视图会瞬间改变，然后在 App 组件中出现错误（它是另一条路线）。

我用"react-router": "^2.8.1".

PS：错误出现在组件 {App} 中的 setinterval 函数中。

提前感谢您的帮助

【问题讨论】：

请显示您的链接代码和您遇到的错误。这些信息不足以帮助您解决问题。
能否提供相关代码setInterval？
@hlfrmn .这是我的代码 setinterval: setInterval(function(){ document.getElementById("demo").innerHTML =moment().format('hh:mm:ss a'); },1000)
@Chris。这是我的链接代码：user
@Developer 能否请您发布更大的应用程序组件 - 包括 setinterval 函数、Link 以及最好的其余部分 - 一个大块。

标签： reactjs react-router

【解决方案1】：

尝试在顶部使用这个：

import { Link } from 'react-router-dom'

参考这个：https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/Link.md

【讨论】：

我可以将 react-router 与 'react-router-dom 一起使用吗？
react-router-dom 现在支持新版本。最好使用 react-router-dom 而不是 react-router。它还可能提高您应用的性能。
我应该在创建路由的代码中进行哪些更改以在 react-router-dom 中工作？
查看这篇精彩的文章medium.com/@pshrmn/…。 PS：最后别忘了给我的答案点赞。

【解决方案2】：

你得到的原因

TypeError: 无法设置属性 'innerHTML' of null

是因为您在离开 App 组件时没有清除间隔，并且由于它仍在运行，因此它会尝试访问 document.getElementId("demo") 已经不存在了

你需要做的是clear the timercomponentWillUnmount

componentDidMount(){ 
        this.interval = setInterval(function(){ 
           document.getElementById("demo").innerHTML =moment().format('hh:mm:ss a');
        },1000);
    } 

   componentWillUnmount() {
       clearInterval(this.interval);
   }

【讨论】：

请检查这个解决方案，如果它适合你，请告诉我
是的，问题是为什么尽管我在 {User} 组件的路径中，但错误在另一个组件中！
你是否也改变了你的componentDidMount函数来存储setInterval函数的返回值
是的，问题是为什么尽管我在 {User} 组件的路径中，但错误在另一个组件中！
这是因为 setInterval，因为当你离开时它没有被清除

【解决方案3】：

在顶部添加这个import { IndexRoute} from 'react-router';

ReactDOM.render(
  <Router history={browserHistory}>  
   <IndexRoute path="/" component={App} />
   <Route path="/:id" component={User} />
   </Router>,
  document.getElementById('root')
);

这会将您的主根路径与其他路径区分开来。

【讨论】：

不，不工作，应用程序组件不工作，在我的“/”路线中，如果我添加这个 indexroute，我没有任何视图。
@Developer，IndexRoute 不是 react-router v4 的一部分，所以如果您使用相同的版本，这将不起作用
我使用“react-router”：“^2.8.1”
请用您正在使用的 react-router 版本更新您的问题，以便人们可以相应地帮助您。 :)