Idea on how to make route component

I am trying to make a tiny component to display the path in my e-commerce app.

I can make it to work using plain javascript, but I’ve got no idea how to do it and make react-router aware.

what i have so far:

const RouteBar = ({ location, ...props }) => {
  const [path, setPath] = useState([]);

  useEffect(() => {
    const path = location.pathname.split('/').filter(Boolean);
  }, [location.pathname]);

  const renderPath =, index) => {
    return (
      <Fragment key={generateId()}>

I have even tried the replace prop on Link, but it’s not doing what i want.

Hi @samolex,

I guess you can import the useLocation hook from react-router.

import {useLocation} from "react-router-dom";
const RouteBar = () => {
  const location = useLocation();
  return <div>{location.pathname}</div>

sure! I have done that.

What I want is that if I have the links from the array:

shop / product / anything

…on clicking on any link (anything) from the above links I should be directed to its path. eg.

clicking on:

shop => http://localhost:3000/shop
product=> http://localhost:3000/shop/product

In this case:

const RouteBar = () => {
  const links = [{
    name: 'Shop',
    path: '/shop'
  name: 'About',
  path: '/about'

return => <Link key={} to={link.path}>{}</Link >


OMG. I am too dumb not to have thought of this. Thank you!

@samolex, don’t say that :slight_smile:
Sometimes you just need a second pair of eyes.