title: react-router-dom get id from route with custom components and extra path
body: <p>I have an app that uses a react-router-config and uses a <a href="https://serverless-stack.com/chapters/create-a-route-that-redirects.html" rel="noreferrer">wrapper component</a> to redirect unauthenticated users.</p>
  
  <p>I have some functionality that requires the use of the route /tasks/:id but I am unable to access the :id value to perform the necessary task lookup.</p>
  
  <p>My routes.js:</p>
  
  <pre><code>import React from "react";
  ...
  const Tasks = React.lazy(() =&gt; import("./Components/Tasks"));
  ...
  const routes = [
    {
      path: "/tasks/edit/:id",
      name: "View Task",
      component: Tasks
    }
  ...
  ];
  export default routes;
  </code></pre>
  
  <p>Then I have <code>AuthenticatedRoute.js</code>:</p>
  
  <pre><code>import React from "react";
  import { Route, Redirect } from "react-router-dom";
  
  export default function AuthenticatedRoute({
    component: C,
    appProps,
    ...rest
  }) {
    return (
      &lt;Route
        {...rest}
        render={props =&gt;
          appProps.isAuthenticated ? (
            &lt;C {...props} {...appProps} /&gt;
          ) : (
            &lt;Redirect
              to={`/login?redirect=${props.location.pathname}${props.location.search}`}
            /&gt;
          )
        }
      /&gt;
    );
  }
  </code></pre>
  
  <p>and in the App.js:</p>
  
  <pre><code>import React, { useState, useEffect } from "react";
  import { BrowserRouter, Switch, withRouter } from "react-router-dom";
  import AuthenticatedRoute from "./components/AuthenticatedRoute/AuthenticatedRoute";
  import routes from "./routes";
  
  function App(props) {
  ...
    return (
      &lt;BrowserRouter&gt;
        &lt;React.Suspense fallback={loading()}&gt;
          &lt;Switch&gt;
              {routes.map((route, idx) =&gt; {
                return route.component ? (
                  &lt;AuthenticatedRoute
                    key={idx}
                    path={route.path}
                    exact={route.exact}
                    name={route.name}
                    appProps={props}
                    component={props =&gt; &lt;route.component {...props} /&gt;}
                  /&gt;
                ) : null;
              })}
          &lt;/Switch&gt;
  ...
        &lt;/React.Suspense&gt;
      &lt;/BrowserRouter&gt;
  </code></pre>
  
  <p>Finally I have my Tasks.js:</p>
  
  <pre><code>import React, { useState, useEffect } from "react";
  ...
  function Tasks(props) {
    useEffect(() =&gt; {
      onLoad();
    }, []);
  
    const onLoad = async () =&gt; {
      console.log(JSON.stringify(props.match.params));
    };
  ...
  </code></pre>
  
  <p>Browsing to localhost:3000/tasks/1. <code>props.match.params</code> is empty in every component up the chain. <code>props.match.params.id</code> is <code>undefined</code>. I have also tried match with <code>{match.params.id}</code> but that is also undefined at every component.</p>
  
  <p>I can see <code>props.location.pathname</code> but that is the full path and I would have to manually get the last segment. I can't get it to automatically grab the <code>:id</code> from the url.</p>
  
  <p><strong>EDIT</strong>
  Turns out my example was too simplified, which actually helped me identify the issue. In my previous version when I had the route:</p>
  
  <pre><code>  {
      path: "/tasks/:id",
      name: "View Task",
      component: Tasks
    }
  </code></pre>
  
  <p>everything actually works fine using <code>useParams</code> I am able to get the <code>:id</code> value. What I actually have in my app and what seems to be breaking it is adding an additional directory to the path:</p>
  
  <pre><code>  {
      path: "/tasks/edit/:id",
      name: "View Task",
      component: Tasks
    }
  </code></pre>
  
  <p>I am not sure how this makes a difference, but having the extra <code>/edit</code> seems to break the <code>useParams</code></p>