0

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

问题是一些 URL 已经公开,所以我希望它们向后兼容。例如,如果用户去/#/about,那么他们将被自动重定向到/about

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

谢谢!

4

1 回答 1

0

感谢@Calvin 上面的评论,它让我有了一个不同的思考过程。我发现 React Boilerplate 允许这样的重定向:

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

这将被放置在routes.js文件中。我找到这个答案的问题/答案的链接在这里

编辑

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

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
}

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

于 2017-06-16T21:28:14.610 回答