Angular to React - 如何替换井号(hashtag)的使用

时间:2017-06-16 18:50:30

标签: javascript reactjs react-router react-boilerplate

我即将重做从Angular 1到React的代码切换。我一直在使用React Boilerplate一段时间,它使用React Router v3,我真的很喜欢这个设置。我的Angular项目使用 example.com /#/ about 等网址,我真的不喜欢#符号的概念,所以我想让网址看起来像 example.com/about 即可。

问题是一些网址已经发布给公众,所以我希望它们能够向后兼容。例如,如果用户转到 /#/ about ,则会自动将其重定向到 / about

如果您了解React Boilerplate的生态系统,那将会有所帮助。我知道重定向的概念很简单,但我想在样板内以干净的方式做到这一点。有什么想法吗?

谢谢!

1 个答案:

答案 0 :(得分:0)

感谢@ Calvin上面的评论,它让我陷入了不同的思考过程。我发现React Boilerplate允许重定向,如下所示:

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

这将放在 routes.js 文件中。我找到此答案的问题/答案的链接是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
}

唯一需要注意的是,如果我需要锚链接,那么我必须想出一些东西。不理想,但它可能会帮助那些必须进行此类过渡的人。