title: react router use params returns empty object
body: <p>I have a web app which is under development which is just like google drive using firebase. I have this useParams() in Dashboard Screen which is the main page of the App with All the different Folder Routes. So for this screen i have used useParams and now when i console.log(params) it shows an empty object {} and also when i click the button it does not navigate only the URL changes</p>
  <p>Github Code :- <a href="https://github.com/KUSHAD/RDX-Drive/" rel="nofollow noreferrer">https://github.com/KUSHAD/RDX-Drive/</a></p>
  <p>In App.js</p>
  <pre class="lang-js prettyprint-override"><code>import { BrowserRouter, Switch, Route } from 'react-router-dom';
  import PrivateRoute from './Components/Route/PrivateRoute';
  import Dashboard from './Screens/Main/Dashboard';
  import ViewProfile from './Screens/Profile/ViewProfile';
  import Signup from './Screens/Auth/Signup';
  import Login from './Screens/Auth/Login';
  import ForgotPassword from './Screens/Auth/ForgotPassword';
  function App() {
      return (
          &lt;&gt;
              &lt;div className='App'&gt;
                  &lt;div className='main'&gt;
                      &lt;BrowserRouter&gt;
                          &lt;Switch&gt;
                              {/* Drive */}
                              &lt;PrivateRoute exact path='/' component={Dashboard} /&gt;
                              &lt;PrivateRoute
                                  exact
                                  path='/folder/:folderId'
                                  component={Dashboard}
                              /&gt;
  
                              {/* Profile */}
                              &lt;PrivateRoute path='/profile' component={ViewProfile} /&gt;
  
                              {/* Auth */}
                              &lt;Route path='/signup' component={Signup} /&gt;
                              &lt;Route path='/login' component={Login} /&gt;
                              &lt;Route path='/forgot-password' component={ForgotPassword} /&gt;
                          &lt;/Switch&gt;
                      &lt;/BrowserRouter&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/&gt;
      );
  }
  
  export default App;
  
  
  </code></pre>
  <p>In Dashboard.js</p>
  <pre class="lang-js prettyprint-override"><code>import NavBar from '../../Components/Shared/NavBar';
  import Container from 'react-bootstrap/Container';
  import AddFolderButton from '../../Components/Main/AddFolderButton';
  import { useDrive } from '../../services/hooks/useDrive';
  import Folder from '../../Components/Main/Folder';
  import { useParams } from 'react-router-dom';
  export default function Dashboard() {
      const params = useParams();
      console.log(params);
      const { folder, childFolders } = useDrive();
      return (
          &lt;div&gt;
              &lt;NavBar /&gt;
              &lt;Container fluid&gt;
                  &lt;AddFolderButton currentFolder={folder} /&gt;
                  {childFolders.length &gt; 0 &amp;&amp; (
                      &lt;div className='d-flex flex-wrap'&gt;
                          {childFolders.map(childFolder =&gt; (
                              &lt;div
                                  key={childFolder.id}
                                  className='p-2'
                                  style={{ maxWidth: '250px' }}&gt;
                                  &lt;Folder folder={childFolder} /&gt;
                              &lt;/div&gt;
                          ))}
                      &lt;/div&gt;
                  )}
              &lt;/Container&gt;
          &lt;/div&gt;
      );
  }
  
  </code></pre>