javascript - 链接不适用于 React.js 中的 React 路由器

Question

问题是每当我点击 <link>元素，URL 更改，但新组件未呈现。我必须手动更新页面以便加载组件。我已经尝试使用 withRouter如前所述here ，但对我不起作用。

我使用 <link>里面的标签 <Router> :

render() {
  return (
    <div className="articles-wrapper">
      {this.state.articles.map(article => (
        <article key={article.id}>
          <div className="image-wrapper">
            <img src={article.better_featured_image.source_url} />
          </div>
          <div className="article-data">
            <p className="article-date">
              <span className="date">{this.dameFecha(article.date)}</span> |
            </p>
            <h1>{article.title.rendered}</h1>
            <Router>
              <Link to={article.slug}>SEE MORE</Link>
            </Router>
          </div>
        </article>
      ))}
    </div>
  );
}

在一个单独的文件中，我检查路径以了解我应该加载哪个组件:

import React, { Component }  from 'react';
import { Route, Switch, BrowserRouter as Router } from 'react-router-dom';

import App from './App';
import Articulo from './Components/Articulo';
import Page404 from './Components/Page404';

class AppRoutes extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route path='/:slug' component={Articulo} />
          <Route exact path='/' component={App} />
          <Route component={Page404} />
        </Switch>
      </Router>
    )
  }
}

export default AppRoutes;

我错过了什么？

Answer 1

删除 <Router> <Link>周围它会起作用的。你应该只使用一个 <Router>像您已经完成的那样在应用程序顶部添加组件。