react中如何做路由？

我第一次在我的應用程式中進行路由請幫助我 react-dom.development.js:26740 Uncaught Error: You cannot render a inside another 。你的應用程式中不應該有多個。 我在組件內使用了路由器。然后我決定為整個應用程式進行路由。我得到一個錯誤。如何重寫路由以便路由器在組件應用程式中作業

const App = () => {
  return (
    <Routes>
      <Route path="/" element={<MainPage />} />
      <Route path="a" element={<StartSearchingPage />} />
      <Route path="UserNotFoundPage" element={<UserNotFoundPage />} />
      <Route path="404" element={<Page404 />} />
    </Routes>
  );
};

export default App;

index.js

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
    ,
  </React.StrictMode>,
);

分頁

const PaginationButton = (page, handleChange, res) => {
  return (
    <NavLink
      onClick={() => handleChange(res   1)}
      to={`/users/repos/page/${res   1}`}
      className={cn(styles.pagination__item, {
        [styles.active]: page === res   1,
      })}
      key={res}
    >
      {res   1}
    </NavLink>
  );
};
const Pagination = ({
  handleClickPrev,
  pageSize,
  page,
  reposCount,
  amount,
  handleChange,
  handleClickNext,
}) => {
  return (
    <Router>
      <div className={styles.pagination__wrap}>
        <ul className={styles.pagination__list}>
          <div className={styles.pagination__count}>
            {pageSize * page <= reposCount ? pageSize * page - 4 : reposCount}
            -
            {pageSize * page <= reposCount ? pageSize * page : reposCount}
            {' '}
            of
            {' '}
            {' '}
            {reposCount}
            {' '}
            items
          </div>
          <button
            type="button"
            className={styles.pagination__arrowleft}
            draggable="false"
            onClick={() => handleClickPrev()}
          >
          </button>
          {amount?.length > 7 ? (
            <>
              {page < 3
                && [...amount].splice(0, 3).map((res) => {
                  return PaginationButton(page, handleChange, res);
                })}
              {page === 3
                && [...amount].splice(0, 4).map((res) => {
                  return PaginationButton(page, handleChange, res);
                })}
              {page > 3
                && [...amount].splice(0, 1).map((res) => {
                  return PaginationButton(page, handleChange, res);
                })}
              <span className={styles.pagination__item}>...</span>
              {page > 3
                // eslint-disable-next-line no-unsafe-optional-chaining
                && page < amount?.length - 2
                && [...amount].splice(page - 2, 3).map((res) => {
                  return PaginationButton(page, handleChange, res);
                })}
              {page > 3 && page < amount.length - 2 && (
                <span className={styles.pagination__item}>...</span>
              )}
              {page < amount.length - 2
                && [...amount].splice(amount.length - 1, 1).map((res) => {
                  return PaginationButton(page, handleChange, res);
                })}
              {page === amount.length - 2
                && [...amount].splice(amount.length - 4, 4).map((res) => {
                  return PaginationButton(page, handleChange, res);
                })}
              {page > amount.length - 2
                && [...amount].splice(amount.length - 3, 3).map((res) => {
                  return PaginationButton(page, handleChange, res);
                })}
            </>
          ) : (
            amount?.map((res) => {
              return PaginationButton(page, handleChange, res);
            })
          )}
          <button
            type="button"
            className={styles.pagination__arrowright}
            draggable="false"
            onClick={() => handleClickNext()}
          >
          </button>
        </ul>
      </div>
    </Router>
  );
};

uj5u.com熱心網友回復：

您需要Router從分頁中洗掉該組件。在我看來，你甚至不需要那個。

如果你嵌套Route它應該是這樣的孩子Route，而不是Router.

const App =() => {
  return (
    <Routes>
      <Route path="invoices" element={<Invoices />}>
        <Route path=":invoiceId" element={<Invoice />} />
        <Route path="sent" element={<SentInvoices />} />
      </Route>
    </Routes>
  );
}

https://reactrouter.com/docs/en/v6/getting-started/overview#nested-routes

uj5u.com熱心網友回復：

錯誤很明顯，您<Router>在 App 中多次渲染了組件。只需從Navigation.

<Router>組件就是您定義路由的地方。

uj5u.com熱心網友回復：

您必須從 index.js中洗掉BrowserRouter標記

您的 index.js 檔案將是

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
<BrowserRouter>
  <Routes>
    <Route path="/" element={ <App /> }>
    </Route>
  </Routes>
</BrowserRouter>

</React.StrictMode> );

而 App.js 將是

 const App = () => {
      return (
     <div className="app">
        <Routes>
          <Route exact  path="/" element={<MainPage />} />
          <Route exact  path="/a" element={<StartSearchingPage />} />
          <Route exact  path="/UserNotFoundPage" element={<UserNotFoundPage />} />
          <Route exact  path="/404" element={<Page404 />} />
        </Routes>
     </div>
      );
    };

export default App;

標籤：反应

上一篇：一鍵更改兩種狀態

下一篇：最大值（100）的Highcharts問題-React