Question

我正在学习反应，所以我正在用它来开发个人博客。此外，我使用react-route，但是我有一个问题，因为我不明白为什么不渲染路线（route：/ articule /：id）。您可以在repository中查看代码。

在index.js中定义路由：

//it  works
//index.js
const app = (
  <Router>
    <Switch>
      <Route exact path="/" component={IRMBlog} />
      <Route path="/articule/:id"  component={IRMArticule}/>
    </Switch>
  </Router>
);

但是如果我将行<Route path="/articule/:id" component={IRMArticule}/>移到其他文件上不起作用，为什么？

我移动代码行时的文件是irm-articule-list.js

render() {
return (
  <div className="column is-10 is-offset-1">
    <IRMArticuleBox></IRMArticuleBox>
    <IRMArticuleBox></IRMArticuleBox>
    <Route path="/articule/:id"  component={IRMArticule}/>
  </div>
);

}

在文件irm-articule-box.js中，我<Link to="/articule/001">

Answer 1

因为应用程序必须只有一个路由器，并且路由器的反应几乎是根组件，所以一个输入就是用于匹配您的网址的

Answer 2

喜欢这个。

import React, { Component } from 'react;
import { Link } from 'react-router-dom';

class articuleDetails extends Component {
 render(){

   return (
   .....
    <Link to="/articule/123"> articule name</Link>
   ...
   )    

 }
}

Answer 3

为什么要移动它？通常，您应该知道Route必须在Router内，并且其工作是告诉浏览器，当其路径与位置匹配时要呈现哪个组件。它不是类似于HTML中的标记的超链接。如果您打算使用超链接，则应使用public static String BROWSER;

路由在react-router中不匹配

3 个答案: