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

创建历史记录对象并从此处更改网址

// 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）。

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

3 个答案:

使用新添加的useHistory挂钩

创建历史记录对象并从此处更改网址