Javascript 单页Web应用程序，不'；不要更改url

好吧，我知道我在这里反对传统观点，但这是事实。我正在学习如何使用react和redux构建水疗中心，一切都进展顺利。我加入了react路由器，因为这似乎是公认的做法，但现在我遇到了问题。我想让我的SPA像一个真正的应用程序一样，用户总是在登录页面进入，然后从那里进入。当用户从一页导航到另一页时，会获取和存储各种内容。例如，某些页面需要授权，而其他页面则不需要授权。问题是，当我使用react路由器时，每个路由的URL都会发生变化。因此，当用户在随后的访问中通过书签返回时，应用程序会尝试跳转到他们离开的页面，而不是我需要他们进入的入口点。这把引擎盖下面的一堆东西搞砸了，他们吃得狼吞虎咽

我从来没有真正理解为什么传统智慧是“永远不要打破后退按钮”，并且总是在url中反映用户所做的一切。这似乎是一种教条，很难找到其他的思维方式。例如，我曾多次在谷歌搜索时，去一个网站，在那里我点击了一段时间，没有找到我要找的东西，然后想使用“后退”按钮返回到我的谷歌搜索结果，但它会返回到我在该网站上所做的每一步。呜呜。我最终不得不关闭那个标签，重新开始。这种事经常发生在我身上

在移动应用程序中，用户习惯于总是到达登录页，然后从那里点击。为什么web应用不能以同样的方式运行

所以我的问题是：如何在react redux应用程序中实现这一点？我有一个内部“后退”按钮，用户可以点击该按钮进入应用程序中的上一个“页面”。我想我可以把“历史记录”保存在redux商店中，并编写一些goBack方法之类的不会改变URL的方法。有没有使用这种方法的例子

---

非常感谢您的建议

你的建议有两个挑战。首先，如果没有URL，用户就不能为自己的位置添加书签。其次，应用程序在浏览器窗口中运行，浏览器窗口有一个后退按钮（和前进按钮以及历史记录按钮）

我正在开发一个SPA，在初始引导之后，它只能通过RESTful api发出JSON请求。这很好地工作，但是需要额外的工作来管理页面历史记录。如果没有it，当用户点击浏览器中的“后退”按钮时，他们会因为从应用程序“退出”回到登录页面而感到沮丧

然而，我们维护的页面历史记录是我们控制的，因此可以按照我们想要的粒度进行管理。有许多api调用不会更改URL。不幸的是，对于许多框架，他们希望您在“页面”思维模式下操作，希望很快会有所改变。（就我个人而言，我正在考虑禁用“后退”按钮，以便用户将其更多地视为一个应用程序。）

---

我认为你提出的观点，我也同意这一点，即我们正在构建应用程序，并且受限于页面的“传统”概念，这使得“单页面应用程序”的概念比它应该的要少一些。

正如你所说，这可能不是一个好主意去违反粮食和创造自己的后退按钮

这就是说，如果您不想要react路由器的那些功能，那么实现您自己的路由器应该不会很困难

例如，您可以使用历史记录列表对redux状态进行建模

{
  history: ["home"],
  home: { ... },
  otherPage: { ... },
}

然后在顶级渲染函数中，只需确定页面和渲染

import HomeComponent from 'components/HomePage'
import OtherPageComponent from 'components/OtherPageComponent'

const pages = {
    'home': HomeComponent,
    'otherPage': OtherPageComponent
}

export class App extends React.Component {
    ...
    render() {
        const CurrentPage = this.props.history[this.props.history.length-1];
        return (
             <CurrentPage />
        )
    }
}

export default App;

然后，您可以通过调度相关操作来更改任何页面上的路由

// some-component.js
import { goBack, changeRoute } from 'action.js'

...
// in some render method

<button onClick={() => dispatch(goBack())}>
    Go Back
</button>
<button onClick={() => dispatch(changeRoute('somePage'))}>
    Go to some page
</button> 

//some-component.js
从'action.js'导入{goBack，changeRoute}
...
//在某些渲染方法中
分派（goBack（））}>
回去
调度（changeRoute（'somePage'））}>
转到某一页

您可能希望将onClick内容打包到某种

组件中，比如react router

---

祝你好运

不知道，但你的问题/设计咆哮让我笑了。请接受我的投票。实现您自己的

我在
变量的哪个页面上，并拥有一个基于该变量呈现不同组件的组件，将其存储在redux reducer中，然后通过redux进行更新。你的用户肯定会讨厌你。或者在钩子检查之前做一些反应，如果主页还没有加载，重定向到那里。
// some-component.js
import { goBack, changeRoute } from 'action.js'

...
// in some render method

<button onClick={() => dispatch(goBack())}>
    Go Back
</button>
<button onClick={() => dispatch(changeRoute('somePage'))}>
    Go to some page
</button>