CODEWITHSUNDEEP
reactjs
Ijuy23kl
Ijuy23kl

Reputation: 71

How to do routing in react?

i'm first times make routing in my app help me please react-dom.development.js:26740 Uncaught Error: You cannot render a inside another . You should never have more than one in your app. I used a Router inside a component. Then I decided to make routing for the entire application. And I get an error. How can I rewrite the routing so that the Router works inside the component app

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>,
);

Pagination

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>
  );
};

Upvotes: 0

Views: 592

Answers (3)

Ajay Gupta
Ajay Gupta

Reputation: 841

You will have to remove BrowserRouter tag from index.js

Your index.js file will be

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

</React.StrictMode> );

And App.js will be

 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;

Upvotes: 0

mahan
mahan

Reputation: 15035

You need to remove the Router component from Pagination. It looks to me that you do not need that even.

Should you nest Route it should be a child of Route like this, not 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

Upvotes: 1

Pedro Feltrin
Pedro Feltrin

Reputation: 448

The error is very clear, you have rendered the <Router> component more than once in your App. Just remove the extra one from Navigation.

The <Router> component is just where you define the routes.

Upvotes: 0

Related Questions