javascript - 不更改 url 的单页 Web 应用程序

Question

好吧，我知道我在这里违背了传统智慧，但我还是这么做了。我正在学习如何使用 React 和 Redux 构建 SPA，一切进展顺利。我合并了 react-router，因为它似乎是可以接受的事情，但现在我遇到了问题。我希望我的 SPA 像一个真正的应用程序一样运行，用户总是会在登录页面进入，然后从那里离开。当用户从一个页面导航到另一个页面时，会获取和存储各种内容。例如，有些页面需要授权，有些则不需要。问题是当我使用 react router 时，每条路由的 URL 都会发生变化。那么，当用户通过书签在随后的访问中返回时，应用程序会尝试跳转到他们离开的页面，而不是我需要他们去的入口点。这把引擎盖下的一堆东西搞砸了，他们得到了 gobbledegook。

我从来没有真正理解为什么“永远不要破坏后退按钮”并始终在 url 中反射(reflect)用户所做的一切是传统智慧。这似乎是一个教条，很难找到任何替代的思维方式。例如，我曾经有过这样的经历，当我进行谷歌搜索并转到一个网站时，我在该网站上点击了一会儿，找不到我要找的东西，然后想使用后退按钮返回到我的谷歌搜索结果，而是点击点击点击返回我在那个网站上所做的每一步。呸。我最终不得不关闭该选项卡并重新开始。这一直发生在我身上。

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

所以我的问题是:我将如何在 react-redux 应用程序中实现它？我有一个内部“后退”按钮，用户可以单击该按钮转到应用程序中的上一个“页面”。我在想我可以在 redux 存储中保留“历史记录”，并编写一些 goBack 方法等不改变 URL 的方法。有没有使用这种方法的例子？

非常感谢任何建议。

Answer 1

正如您所说，违背常规并创建您自己的后退按钮可能不是一个好主意。

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

例如，您可以使用历史列表对 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;

然后你需要一个 reducer/action 来改变路由，

// reducer.js
export default function reducer(state, action) {
    switch(action.type) {
        case 'CHANGE_ROUTE':
            return {
                ...state,
                history: state.history.concat([action.route])
            }
        case 'GO_BACK':
            return { 
                ...state,
                history: history.slice(0,-1)
            }
        default:
            return state
    }
}

// action.js
export const changeRoute = (route) => ({ type: 'CHANGE_ROUTE', route });
export const goBack = () => ({ type: 'GO_BACK'});

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

// 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> 

您可能希望将 onClick 的东西打包到某种 <Link> 中。像 react-router 这样的组件。

祝你好运!