Reactjs 反应-链接整个元素的最佳方式？

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

我试过的一件事是：

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

---

这种方法似乎工作得更好，尽管我不确定将整个元素包装在

anchor

标记中是否是最佳做法，因为我必须覆盖元素中任何文本的链接样式。

Link

是解决这个问题的最佳方法还是我还没有找到其他方法？有没有一种方法可以模拟锚定标记的行为而不实际将整个元素包装到锚定中？

使用

this.props.history

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

this.props.history.push（`/blog/${this.props.post.slug}）}>

如果渲染上述内容的组件不是由路由渲染的，则使用

with router

HOC，由

react router dom

提供，第二种方法更好。 我们经常将此技术用于徽标，如下所示。 只要react生成相似的标记，您就应该是好的。 这对WCAG也有好处

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

---

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

使用新添加的useHistory钩子 这是在

react router dom

v5.1中引入的，因此，如果您使用的是旧版本更新，请检查下一个选项

您可以在由

路由渲染的任何组件上使用此挂钩：

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>
);

导入{
使用历史，
BrowserRouter作为路由器，
链接
转换
}从“反应路由器dom”；
const Blog=（{post:{slug}}）=>{
const{push}=useHistory（）；
返回(
推送（“/blog/”+slug）}>
);
};
常量应用=（）=>(
//…获得职位等。


家


博客


商店


}
/>
);

创建历史对象并从中更改url
//请注意，此处不使用BrowserRouter
从“react Router dom”导入{Router，Link，Switch}；
从“历史”导入{createBrowserHistory}；
const history=createBrowserHistory（）；
const Blog=（{post:{slug}}）=>{
const{push}=历史；
返回(
推送（“/blog/”+slug）}>
);
};
常量应用=（）=>(
//…获得职位等。


家


博客


商店


}
/>
);

这是最通用的方法，因为您可以在
路由
中未包含的组件中以及几乎任何地方使用它。在utils或helpers文件夹中声明它并为此导出它是一种很好的方法（请记住将
历史记录
对象传递到
路由器
）。
任何链接都应该使用锚定。如果必须使用onClick处理程序，请确保设置了适当的。请记住，创建自己的链接的一大缺点是，您失去了浏览器/a11y技术对链接的所有支持
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>
);

// 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>
);