Introducing ReUI:Open-source UI components and apps built with React, Next.js and Tailwind CSS
Browse ReUI
Light
Dark
System
Ask  Question

How to create a clickable project that takes me to the details view using React Router


Hi,

In the React demo1 of Metronic version 8.1.0 there is a Profile module. This is the URL for it:


http://localhost:3011/metronic8/react/demo1/crafted/pages/profile/overview


When I go to Projects:


http://localhost:3011/metronic8/react/demo1/crafted/pages/profile/projects


I see a grid of projects nicely displayed as card components.

What I would like to do is:

1. Be able to click a project, let's say for example the first project in the list.
2. When I click the first project the browser should update the URL in the addressbar to


http://localhost:3011/metronic8/react/demo1/crafted/pages/profile/projects/1


and also display a new project details component where the grid list is positioned.

How do I need to configure React Router in order for this to work? Could you please provide a simple example?

I tried experimenting with 
Routes
, 
Route
, 
Outlet
and 
Link
. I also consulted the React Router docs. But to be honest, I'm new to React Router and pretty confused about how all the pieces work together and should be configured and laid out in my layout.


D
DC TC 1 year ago
React
1 Answers
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

user
Lauris Stepanovs Author1 year ago

Hi,

Thank you for reaching out to us.

You can create your link path dynamically as shown below:


<Link to={`/crafted/pages/profile/projects/${item.id}`}>
 ...
</Link>


Regards,
Lauris Stepanovs,
Keenthemes Support Team


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(