URL 未更新时在 React 中更改屏幕的最佳方式

Question

我有一个用 React 构建的应用程序，尽管每个屏幕都占据了整个页面，但 url 从不更新。

当每个屏幕是要查看的屏幕时，渲染每个屏幕的最佳方式是什么？

export const App = () => {
  const [activeScreen, setActiveScreen] = useState("PAGE_1");
  const goToScreen2 = () => setActiveScreen("PAGE_2");
  const goToScreen3 = () => setActiveScreen("PAGE_3");

  return (
    <Wrapper>
      {activeScreen === "PAGE_1" &&
        <Page1 nextScreen={goToScreen2} />
      }

      {activeScreen === "PAGE_2" && 
        <Page2 nextScreen={goToScreen3} />
      }

      {activeScreen === "PAGE_3" &&
        <Page3 />
      }
    </Wrapper>
  );
};

Answer 1

我会这样做：

function Page1() {
  return 'Page 1'
}

function Page2() {
  return 'Page 2'
}

function Page3() {
  return 'Page 3'
}

function Pager({
  next,
  prev,
  children
}) {
  return ( 
  <div>
    <button onClick={prev}>Prev</button>
    {children} 
    <button onClick={next}>Next</button> 
  </div>
  )
}



const pages = [Page1, Page2, Page3]

const App = () => {
  const [activeScreen, setActiveScreen] = React.useState(0);
  const goNext = () => setActiveScreen((activeScreen + 1) % pages.length);
  const goBack = () => setActiveScreen((activeScreen - 1 + pages.length) % pages.length);

  const ActivePage = pages[activeScreen]

  return ( 
    <Pager next={goNext} prev={goBack}>
      <ActivePage />
    </Pager>
  );
};

ReactDOM.render( <App /> , document.querySelector('#root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.1/umd/react-dom.production.min.js"></script>
<div id="root" />

URL 未更新时在 React 中更改屏幕的最佳方式

Best way to change screen in React when URL not updated

render

reactjs