Question

问题在于，每当我单击<link>元素时，URL都会更改，但是不会呈现新组件。我必须手动更新页面，以便加载组件。我已经尝试使用here中提到的withRouter，但对我不起作用。

我在<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>组件。

链接无法在React.js中与React Router一起使用

1 个答案: