Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
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 2 years ago
React
1 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (1)

user
Lauris Stepanovs Author 2 years ago

Hi,

Thank you for reaching out to us.

You can create your link path dynamically as shown below:


    ...

Regards, Lauris Stepanovs, Keenthemes Support Team

Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(