Routing in Next.js is based on the file system, while Vite uses a more traditional configuration-based approach. Here's how to create a new route in both frameworks.
Create a file under the pages directory. The file path becomes the URL path.
For example, adding
Use the
1import React from 'react';
2import { Button } from '@mui/material';
3import { RouterLink } from 'src/components/base/router-link';
4import { routes } from 'src/router/routes';
5import Head from 'next/head';
6import { Box } from '@mui/system';
7
8const ComponentsPage = () => {
9 return (
10 <>
11 <Head>
12 <title>Components</title>
13 </Head>
14 <Box
15 display="flex"
16 justifyContent="center"
17 alignItems="center"
18 minHeight="100vh"
19 >
20 <Button
21 size="large"
22 variant="contained"
23 component={RouterLink}
24 href={routes.components.index}
25 >
26 Browse components
27 </Button>
28 </Box>
29 </>
30 );
31};
32
33export default ComponentsPage;
34
Vite requires a router configuration. Define your routes in a configuration file and use them with a router-view component.
A new route in Vite would be added to the routes array in the configuration file, and you'd link to it using a router-link component.