javascript - 在链接路径中使用 "#"的 React-router-dom 不会导航到组件

Question

我正在尝试创建一个功能，当用户点击 <Link> 时，他们导航到另一个组件(帖子)并直接滚动到评论。该路径满足 <Route> 的要求定义，但是当我使用“#”作为 URL 的一部分时，重定向不会生效:

路线:<Route path="/post/:id/:hash" component={Post} />

网址:https://b881s.codesandbox.io/post/4/#ve33e

但是，有趣的是，当我使用“@”而不是“#”时，该功能会按预期工作。

网址:https://b881s.codesandbox.io/post/4/@ve33e

我试图找到任何提及“#”是 react-router-dom 的某种特殊字符的内容，但还没有发现任何东西。也许我从根本上缺少一些东西？

这是带有工作代码的沙箱:https://codesandbox.io/s/scrollintoview-with-refs-and-redux-b881s

App.js

import React from "react";
import ReactDOM from "react-dom";
import Home from "./Home";
import Posts from "./Posts";
import Post from "./Post";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import store from "./store";
import { Provider } from "react-redux";

import "./styles.css";

const App = () => {
  return (
    <Provider store={store}>
      <BrowserRouter>
        <div>
          <Switch>
            <Route path="/" exact component={Home} />
            <Route path="/posts" component={Posts} />
            <Route path="/post/:id/:hash" component={Post} />
            <Route path="/post/:id/" component={Post} />
          </Switch>
        </div>
      </BrowserRouter>
    </Provider>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Posts.js

import React from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";

class Posts extends React.Component {
  createPostList = () => {
    const { posts } = this.props;

    if (posts.posts) {
      return posts.posts.map(post => {
        return (
          <div key={post.id} className="post">
            <Link to={`/post/${post.id}`}>{post.title}</Link>
            <p>{post.text}</p>
            <div>
              {post.comments.map(comment => {
                return (
                  <div>
                    <Link to={`/post/${post.id}/@${[comment.id]}`}>
                      {comment.id}
                    </Link>
                  </div>
                );
              })}
            </div>
          </div>
        );
      });
    } else {
      return <h4>Loading...</h4>;
    }
  };

  render() {
    return <div>{this.createPostList()}</div>;
  }
}

const mapStateToProps = state => {
  return {
    posts: state.posts
  };
};

export default connect(mapStateToProps)(Posts);

Answer 1

URL 字符串中 # 之后的任何内容都称为 hash .您可以使用 location.hash 访问给定 location 的哈希。所以在你的 route 你不需要提及 :hash。您应该改为通过 Route 组件注入(inject)组件的 location 对象读取哈希。

您的路线:

<Route path="/post/:id" component={Post} />

在 Post 组件中读取哈希:

class Post extends React.Component {
    render() {
        const {location} = this.props;
        console.log(location.hash);
        ...
    }
}