score:1
Accepted answer
the page folder must be:
pages/
cars/
[category]/
[id]/
index.jsx
index.jsx
then go /cars/sedan/2
you can access to category
and id
variables like this:
cars/[category]/[id]/index.jsx
import react from 'react';
import { userouter } from 'next/router';
export default function index() {
const router = userouter();
// router.query.category -> sedan
// router.query.id -> 2
return <div>{json.stringify(router.query)}</div>;
}
// or
export const getserversideprops = async (context) => {
const { params } = context;
console.log(params); // { category: 'sedan', id: '2' }
return {
props: {
cars: {},
},
};
};
// or if you wish use getstaticprops for ssg (with getstaticpaths)
export const getstaticpaths = async (context) => {
const paths = cars
.map((car) =>
car.models.map((model) => ({
params: {
id: model.id.tostring(),
category: car.name,
},
}))
)
.flat(); // this is important
return { paths, fallback: false };
};
export const getstaticprops = async (context) => {
const { params } = context;
console.log(params);
return {
props: {
cars: {},
},
};
};
example: stackblitz
Source: stackoverflow.com
Related Query
- NextJs nested dynamic routes based on API
- Nextjs - Nested Dynamic routes - pages/users/[uid]/goals/[goalId]
- Getting 404 when first loading dynamic routes on nextjs
- Creating Dynamic Routes using 'getStaticPaths' and 'getStaticProps' in NextJS
- How to use multiple nested dynamic routes with getStaticPaths?
- NextJs and dynamic routes - how to handle the empty parameter scenario?
- Next.js: getStaticPaths for nested dynamic routes
- Dynamic API routing with getServerSideProps in Nextjs
- Dynamic nested routes in Next.js
- How to create a dynamic routing naming the routes based on props of a component in react-router-dom
- How do you write nested routes after dynamic path in React Router v5.2?
- dynamic routes in nextjs crawlable to search engines?
- Nextjs dynamic routes - how to pass props from parent to dynamic route child
- Building a dynamic nested routes architechure with React and React Router
- React router v5: need a nested route in dynamic routes
- Nextjs dynamic pages based on backend return
- React dynamic routes based on json data
- NextJS dynamic routes with dynamic component
- React - Render dynamic components based on API response
- Next.js: getStaticPaths for nested dynamic routes data structure error
- How to filter and highlight text in the Dynamic nested array of JSON objects based on text match incase sensitive
- How to filter Dynamic nested array of JSON objects based on text match with both upper and lower case
- React Router v4 dynamic nested routes do not match
- Redirect 404 to homepage in Nextjs with dynamic routes
- NextJS API routes how to handle multiple requests with MongoDB
- getStaticPaths for dynamic route catching all routes [[...Id]].js in nextjs
- Nextjs Nested Dynamic route
- Getting 404 when loading dynamic routes on nextjs
- How to map through the array to generate dynamic form based on api response?
- Render react component based on dynamic routes
More Query from same tag
- Reading an environment variable in react which was set by docker
- How to set RTL direction of translation using i18next?
- How to detect/handle back button press in React?
- react-three, child doesn't rerender in one case, but does in the other
- How do I test an html button within a React prop?
- What's the difference between `useRef` and `createRef`?
- How I can make a static map with google-map-react in react?
- CORS issue when trying to do JQuery post with json data, but not with plain text or x-www-form-urlencoded
- Multiple File Upload with React JS
- How do I resolve "Uncaught TypeError: iterable.hasOwnProperty is not a function"?
- antd dropdown is not closing on mouse leave
- Why can react-test-renderer only findByType functional components in the same file in React?
- Browserifying react with addons to a standalone component, usable by plugins
- React Firebase Auth initialization problem - No Firebase App '[DEFAULT]' has been created
- Problem with react useState falling behind one step
- Best way to implement edit functionality in my react component
- React Router v4.0 - Redirect to a page outside of Router scope
- How to list 4 products on every page using ant design Pagination component in react js?
- React: How to pass in props from a <Link /> on React Router?
- React native text component using number of lines
- Show No data message if no records found in reactjs functional component
- Firebase call inside useEffect is not returning data properly
- jsx react debugger not matching despite webpack source maps
- Why i can't access list of array in react
- Passing Variables Into Custom Button
- npm error " The header content contains invalid characters" when installing React-Native?
- What is this.props (Meteor with React Tutorial)
- React-select: How to display HTML in options
- Prevent re-render whole image list after new images was added to the list
- Prevent component re-render with styled-components