score:0
i don't know why you are using react-router-dom
and then not really use it for what it was designed for. you are working with function components, so as far as i can tell, any solution will require a react hook. whether you just use the useparams
hook to get the id
to filter by, or if you declare an id
state in the parent with usestate
, or create a react context and use both usestate
and usecontext
, or use redux and usedispatch
and useselector
. do you see where this is headed?
i suggest just using the useparams
hook as it's the most trivial to implement.
fix the character bio route so the
id
route match param is easier to read and consume.<route path="/charbio/:id" element={<charbio />} />
with
path="/charbio:id"
the link would inject a leading:
character into the id withto={`/charbio${element.id}`}
, i.e. instead of"goku"
theid
param would be":goku"
, and this doesn't work easily for filtering.fix the link in
perso
so it's linking to a"/charbio/:id"
path.<link to={`/charbio/${element.id}`}> <h1>{element.id}</h1> </link>
use the
useparams
hook in thecharbio
component and filter theapi
data byid
.export default function charbio() { const { id } = useparams(); const element = api.find(el => el.id === id); return element ? <p>{element.bio}</p> : null; }
Source: stackoverflow.com
Related Query
- React Router ID dynamic routes with JSON data
- Building a dynamic nested routes architechure with React and React Router
- React dynamic routes based on json data
- Passing data from a single JSON file from parent to child component in React using dynamic routes
- Create custom dynamic routes with react router and regex to the same component
- Nested routes with react router v4 / v5
- How to fetch the new data in response to React Router change with Redux?
- React Router v4 Nested Routes with Switch
- React Router doesn't load images properly with nested routes
- React Router v4 components with similar paths (fixed and dynamic path param) are "overlapping"
- Refresh on protected Routes React Router with firebase auth
- Dynamically inject data in React Router Routes
- React Router v4 nested routes not work with webpack-dev-server
- React Router 4 and exact path with dynamic param
- React router - pass api data to the linked component to open with a new page
- React Router v5 accompanied with Code Splitting, and Data Prefetching with the use of Server Side Rendering
- React router v4 with redux protected routes and auth
- Getting json object data with react
- react native how to filter data with some key object on json
- React Router v4 with babel gives error with multiple routes
- React Router v4 routes with parameters not rendering/refreshing
- React Router how to return 404 page in case of dynamic routes expecting a parameter?
- Import routes in React with react router
- react router preload data from multiple components with a single loader animation
- How to refer to data with permalinks using react router
- Nested Routes not rendering with React Router v4
- Using the same component for different Routes with React Router
- Reactjs react router dom useParams not working with dynamic url
- React Typescript: Configure router to allow username based URL's without conflicting with other routes
- Routes are not working with React router v4
More Query from same tag
- React Router List and Detail Route at the same time
- Why does clicking expand button closes the side panel in react?
- React suspense prevent flashing of fallback spinner
- How to play/pause react-audio-player using state/external button
- Change placeholder color with CSS + React + Semantic UI
- React-Checking and Unchecking of CheckBox
- How to cache react component in client side?
- Prevent rerender of sibling component which initiates a useState in wrapper component
- How to test state transition of conditionally rendered components
- React - Nested maps to retrieve json data
- Apply and reset multiple filters on click with redux
- Next js parent route component for children components
- How to use shouldComponentUpdate with React Hooks?
- React Redux: Can view props in browser console, but return undefined when rendered
- Timer React + Redux. React don't dispatch action by timer (SetInterval) in ComponentDidMount
- Latest version of iOS Chrome not downloading blobs correctly (pdf)
- How to Redirect back to my website after transaction ends on Razorpay . Note: if "redirect=true" is passed as an option
- Unable to connect to mosquitto broker server in mqtt-react
- Media Query not working in Radium
- load local jSON file in Reactjs without installing a localserver
- I am not able to initialize create-react-app for some strange reason
- Visual Studio npm modules
- this.setState() is not a function when using react with jquery inside componentDidmount
- How do I see what props have changed in React?
- GraphQL post request in axios
- React: Component with just a form, form submit action differs depending on consumer of the component
- Using Hooks along with Redux---Bad Practice?
- reload button in html
- A proper way to update the state in the parent through buttons in childs
- Ant design editable Paragraph value become null when onChange is triggered