Angular 到 React - 如何替换井号（标签）的使用

Question

我即将重做从 Angular 1 到 React 的代码切换。我已经使用 React Boilerplate 一段时间了，它使用 React Router v3，我真的很喜欢这个设置。我的 Angular 项目使用 URL，例如 example.com/#/about，我真的不喜欢 # 的概念签名，所以我想让 URL 看起来像 example.com/about。

问题是一些 URL 已分发给 public，所以我希望它们向后兼容。例如，如果用户转到 /#/about，那么他们将自动重定向到 /about.

如果您了解 React Boilerplate 的生态系统，那将会很有帮助。我知道重定向的概念很简单，但我想在样板文件中以一种干净的方式进行。有什么想法吗？

谢谢！

Answer 1

感谢@Calvin 上面的评论，它让我进入了一个不同的思维过程。我发现 React Boilerplate 允许这样的重定向：

onEnter: (_nextState, replace, next) {
    replace('/something');
    next();
}

这将被放置在 routes.js 文件中。我找到这个答案的 link 到 question/answer 是 here.

编辑

最终的确切答案是这个函数：

const sniffHash = (nextState, replace, next) => {
    if (nextState.location.hash !== '') {
        let path = nextState.location.hash.replace('#', '');
        replace(path);
    }
    next();
}

其中我在我的家乡路线上使用了变量名称，如下所示：

path: '/',
name: 'home',
onEnter: sniffHash,
getComponent(nextState, cb) {
    //React Boilerplate router stuff
}

唯一需要注意的是，如果我需要锚点 link，那么我将不得不想办法。不理想，但它可能会帮助必须进行此类过渡的人。

Angular 到 React - 如何替换井号（标签）的使用

Angular to React - How to replace use of pound sign (hashtag)

javascript

reactjs

react-router

react-boilerplate

编辑