How to do routing in react? - reactjs

Question

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

Answer 1

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

Answer 2

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.

Answer 3

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;