React-链接整个元素的最佳方法？

Question

我想知道在React中链接整个元素的最佳方法是什么。

我尝试过的一件事是：

<article className="post" onClick={() => window.location = '/blog/' + this.props.post.slug}></article>

此方法导致重新加载整个页面。

我尝试过的另一种方法是使用Link中的react-router-dom：

<Link to={"/blog/" + this.props.post.slug}>
    <article className="post"></article>
</Link>

此方法似乎要好得多，尽管我不确定将整个元素包装在anchor标记中是否是最佳实践，因为我将不得不重写元素中任何文本的链接样式。是Link的最佳方法，还是我还没有找到其他方法？有没有一种方法可以模拟锚标记行为，而无需将整个元素实际包裹在锚中？

Answer 1

如何使用this.props.history

<article className="post" onClick={() => this.props.history.push(`/blog/${this.props.post.slug}`)}></article>

如果没有通过路径渲染上述内容的组件，则使用由withRouter提供的react-router-dom HOC。

Answer 2

第二种方法更好。我们经常将这种技术用于徽标。只要react正在生成类似的标记，您就应该很好。这对WCAG也有好处。

<a  target="_blank" href="https://www.wikipedia.org">
  Wikipedia
  <img alt="(opens in new tab)" src="newtab.svg">
</a>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a

Answer 3

链接是一个非常好的选择；但是，如果您不想修改CSS，则有多种选择：

使用新添加的useHistory挂钩

这是在react-router-dom v5.1中引入的，因此，如果您使用的是较旧版本的更新或请检查下一个选项。

您可以在Route呈现的任何组件上使用此钩子：

import {
  useHistory,
  BrowserRouter as Router,
  Link,
  Switch
} from "react-router-dom";

const Blog = ({ post: { slug } }) => {
  const { push } = useHistory();

  return (
    <article className="post" onClick={() => push("/blog/" + slug)}></article>
  );
};
const App = () => (
  // ... get posts, etc.

  <div className="App">
    <Router>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/blog">Blog</Link>
        </li>
        <li>
          <Link to="/shop">Shop</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route
          path="/blog"
          component={props => <Blog post={post} {...props} />}
        />
        <Route path="/shop" component={Shop} />
      </Switch>
    </Router>
  </div>
);

创建历史记录对象并从那里更改URL

// See that we don't use BrowserRouter here
import { Router, Link, Switch } from "react-router-dom";
import { createBrowserHistory } from "history";

const history = createBrowserHistory();

const Blog = ({ post: { slug } }) => {
  const { push } = history;

  return (
    <article className="post" onClick={() => push("/blog/" + slug)}></article>
  );
};

const App = () => (
  // ... get posts, etc.

  <div className="App">
    <Router history={history}>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/blog">Blog</Link>
        </li>
        <li>
          <Link to="/shop">Shop</Link>
        </li>
      </ul>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route
          path="/blog"
          component={props => <Blog post={post} {...props} />}
        />
        <Route path="/shop" component={Shop} />
      </Switch>
    </Router>
  </div>
);

这是最通用的方法，因为您可以在Route中未包含的组件中以及几乎任何地方使用它。因此，在utils或helpers文件夹中声明它并导出它是一种好方法（请记住将history对象传递给Router）。