title: Cannot read property 'match' of undefined at useParams - React Hooks
body: <p>I am trying to send params in React Router and getting below error</p>
  <p><a href="https://i.stack.imgur.com/3wRwK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3wRwK.png" alt="enter image description here" /></a></p>
  <p>Code for reference
  In my Route.js I have added browserRouter and Route</p>
  <pre><code>function AppRoute() {
      const classes = useStyles();
      return (
          &lt;BrowserRouter&gt;
              &lt;div className={classes.root}&gt;
                  &lt;div className='App-header'&gt;
  
                      &lt;Grid container justify=&quot;center&quot; className={classes.root} spacing={2} alignItems=&quot;center&quot;&gt;
                          &lt;Grid item xs={3}&gt;
  
                              &lt;Paper className={classes.paper} &gt;
                                  &lt;Link to='/'&gt;Dashboard&lt;/Link&gt;
                              &lt;/Paper&gt;
                          &lt;/Grid&gt;
  
                          &lt;Grid item xs={3}&gt;
                              &lt;Paper className={classes.paper} &gt;
                                  &lt;Link to='/create'&gt;Create&lt;/Link&gt;
                              &lt;/Paper&gt;
                          &lt;/Grid&gt;
                          &lt;Grid item xs={3}&gt;
                              &lt;Paper className={classes.paper} &gt;
                                  &lt;Link to=&quot;/edit/john&quot;&gt;Edit&lt;/Link&gt;
                              &lt;/Paper&gt;
                          &lt;/Grid&gt;
                          &lt;div&gt;
                              &lt;Switch&gt;
                                  &lt;Route exact path=&quot;/&quot; component={Dashboard} exact={true} /&gt;
                                  &lt;Route exact path=&quot;/create&quot; component={Create} /&gt;
                                  &lt;Route path=&quot;/edit/:name&quot;&gt;
                                      &lt;Edit /&gt;
                                  &lt;/Route&gt;
                              &lt;/Switch&gt;
                          &lt;/div&gt;
                      &lt;/Grid&gt;
  
  
  
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/BrowserRouter&gt;
  
  
      )
  }
  </code></pre>
  <p>Edit.js</p>
  <pre><code>function Edit() {
      const { name } = useParams();
      return (
          &lt;div&gt;
              Name - {name}
          &lt;/div&gt;
      )
  }
  </code></pre>