Can someone explain the difference between

```html
&lt;Route exact path=&quot;/&quot; component={Home} /&gt;
```

and

```html
&lt;Route path=&quot;/&quot; component={Home} /&gt;
```

I don&#39;t know the meaning of `exact`.

React : difference between &lt;Route exact path=&quot;/&quot; /&gt; and &lt;Route path=&quot;/&quot; /&gt;

I have to implement some business logic depending on browsing history.

What I want to do is something like this:

    reactRouter.onUrlChange(url =&gt; {
       this.history.push(url);
    });

Is there any way to receive a callback from react-router when the URL gets updated?

Detect Route Change with react-router

I am getting the following error when running `npm run start` in the terminal.

&gt; Attempted import error: &#39;Redirect&#39; is not exported from &#39;react-router-dom&#39;.

I have reinstalled `node_modules`, `react-router-dom`, `react-router`. Also restarted the terminal and my computer, but the issue persists. 

**My code:**

```
import React from &#39;react&#39;;
import { Switch, Redirect } from &#39;react-router-dom&#39;;

import { RouteWithLayout } from &#39;./components&#39;;
import { Minimal as MinimalLayout } from &#39;./layouts&#39;;

import {
  Login as LoginView,
  Dashboard as DashboardView,
  NotFound as NotFoundView
} from &#39;./views&#39;;

const Routes = () =&gt; {
  return (
    &lt;Switch&gt;
      &lt;Redirect
        exact
        from=&quot;/&quot;
        to=&quot;/dashboard&quot;
      /&gt;
      &lt;RouteWithLayout
        component={routeProps =&gt; &lt;LoginView {...routeProps} data={data} /&gt;}
        exact
        layout={MinimalLayout}
        path=&quot;/login&quot;
      /&gt;
      &lt;Redirect to=&quot;/not-found&quot; /&gt;
    &lt;/Switch&gt;
  );
};

export default Routes;
```

Here is my `package.json` imports:

```
&quot;react-router&quot;: &quot;^6.0.0-beta.0&quot;,
&quot;react-router-dom&quot;: &quot;^6.0.0-beta.0&quot;,
```

React: &#39;Redirect&#39; is not exported from &#39;react-router-dom&#39;

I&#39;m using React Router v6 and am creating private routes for my application.

In file *PrivateRoute.js*, I&#39;ve the code

    import React from &#39;react&#39;;
    import {Route,Navigate} from &quot;react-router-dom&quot;;
    import {isauth}  from &#39;auth&#39;

    function PrivateRoute({ element, path }) {
      const authed = isauth() // isauth() returns true or false based on localStorage
      const ele = authed === true ? element : &lt;Navigate to=&quot;/Home&quot;  /&gt;;
      return &lt;Route path={path} element={ele} /&gt;;
    }

    export default PrivateRoute

And in file *route.js* I&#39;ve written as:

     ...
    &lt;PrivateRoute exact path=&quot;/&quot; element={&lt;Dashboard/&gt;}/&gt;
    &lt;Route exact path=&quot;/home&quot; element={&lt;Home/&gt;}/&gt;

I&#39;ve gone through the same example *[React-router Auth Example - StackBlitz, file App.tsx][1]*

Is there something I&#39;m missing?

  [1]: https://stackblitz.com/github/remix-run/react-router/tree/main/examples/auth?file=src/App.tsx





Error: [PrivateRoute] is not a &lt;Route&gt; component. All component children of &lt;Routes&gt; must be a &lt;Route&gt; or &lt;React.Fragment&gt;

I&#39;m using react-router-dom 4.0.0-beta.6 in my project.
I have a code like following:

&lt;!-- language: lang-jsx --&gt;

    &lt;Route exact path=&quot;/home&quot; component={HomePage}/&gt;

And I want to get query params in `HomePage` component.
I&#39;ve found `location.search` param, which looks like this: `?key=value`, so it is unparsed.

What is the right way to get query params with react-router v4?

How to get query parameters in react-router v4

There seems to be some confusion with what to use over the other:

* `&lt;Link to=&#39;/some/path&#39;&gt;`
* `&lt;Redirect to=&#39;/some/path&#39;/&gt;`
* `history.push(&#39;/some/path&#39;)`

I have been using React/Router for a little while now, and different posts/answers say different things regarding when to use these, and sometimes they don&#39;t line up with what someone else said. So I think I need some clarification on this.

### From what I understand about `Link` and this [documentation](https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/api/Link.md) it: 

&gt; Provides declarative, accessible navigation around your application.

### From what I understand about `Redirect` and this [documentation](https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md) it:

&gt; Will navigate to a new location. The new location will override the current location in the history stack, like server-side redirects (HTTP 3xx) do.

It seems like all the posts I have read almost everyone uses `Redirect` to navigate around there application, and no one ever recommends using `Link` like in this [post](https://stackoverflow.com/questions/46757676/in-react-is-it-always-better-to-render-a-redirect-than-use-this-props-history-pu?rq=1).

Now `history` can do the same thing as `Link` and `Redirect` except I have a history stack trace.

**Question 1:** When would I want to use `Link` vs `Redirect`, what&#39;s the use case over the other?


**Question 2:** Since `history` can route a user to another location in-app with the added bonus of the history stack, should I always just use the history object when routing?

**Question 3:** If I want to route *outside* of the app, what&#39;s the best method to do so? Anchor tag, Window.location.href, Redirect, Link, none of the above?

React-Router - Link vs Redirect vs History

I have a `&lt;UserListComponent /&gt;` which outputs one `&lt;Contact /&gt;` component and list of contacts presentated by `&lt;Contacts /&gt;`. 

The problem is that in the test for `&lt;UserListComponent /&gt;` when I try to mount it, test outputs an error `Invariant Violation: You should not use &lt;Route&gt; or withRouter() outside a &lt;Router&gt; `

`withRouter()` is used in `&lt;Contacts /&gt;` component.

How can I mock `ContactsComponent` without router in test of parent component?

I found some similar issue https://www.bountysource.com/issues/49297944-invariant-violation-you-should-not-use-route-or-withrouter-outside-a-router
but it only describes situation when component is cover by `withRouter()` itself, not children.

**UserList.test.jsx**

    const mockResp = {
      count: 2,
      items: [
        {
          _id: 1,
          name: &#39;User1&#39;,
          email: &#39;email1@gmail.com&#39;,
          phone: &#39;+123456&#39;,
          online: false
        },
        {
          _id: 2,
          name: &#39;User2&#39;,
          email: &#39;email2@gmail.com&#39;,
          phone: &#39;+789123&#39;,
          online: false
        },
        {
          _id: 3,
          name: &#39;User3&#39;,
          email: &#39;email3@gmail.com&#39;,
          phone: &#39;+258369147&#39;,
          online: false
        }
      ],
      next: null
    }
    
    describe(&#39;UserList&#39;, () =&gt; {
      beforeEach(() =&gt; {
        fetch.resetMocks()
      });
    
      test(&#39;should output list of users&#39;, () =&gt; {
        fetch.mockResponseOnce(JSON.stringify(mockResp));
    
        const wrapper = mount(&lt;UserListComponent user={mockResp.items[2]} /&gt;);
        
        expect(wrapper.find(&#39;.contact_small&#39;)).to.have.length(3);
      });
    
    })


**UserList.jsx**

    export class UserListComponent extends PureComponent {
      render() {
        const { users, error } = this.state;
        return (
          &lt;React.Fragment&gt;
            &lt;Contact
              userName={this.props.user.name}
              content={this.props.user.phone}
            /&gt;
            {error ? &lt;p&gt;{error.message}&lt;/p&gt; : &lt;Contacts type=&quot;contactList&quot; user={this.props.user} contacts={users} /&gt;}
          &lt;/React.Fragment&gt;
        );
      }
    }


**Contacts.jsx**

    class ContactsComponent extends Component {
      constructor() {
        super();
        this.state = {
          error: null,
        };
      }
    
      render() {
        return (
          &lt;React.Fragment&gt;
            &lt;SectionTitle title=&quot;Contacts&quot; /&gt;
            &lt;div className=&quot;contacts&quot;&gt;
             //contacts
            &lt;/div&gt;
          &lt;/React.Fragment&gt;
        );
      }
    }
    
    export const Contacts = withRouter(ContactsComponent);

Jest, Enzyme: Invariant Violation: You should not use &lt;Route&gt; or withRouter() outside a &lt;Router&gt;


I use `react-router-dom` `version 6` and when I use `this.props.history.push(&#39;/UserDashboard&#39;)` it does not work. I changed it to 
```javascript
const history = createBrowserHistory();
history.push(&#39;/UserDashboard&#39;)
``` 
but I still have a problem that when i would like to redirect to `/UserDashboard` just the link change and the page still the first one??

any help??**

```javascript
        handleSubmit(event){
       
    
        event.preventDefault();
        const history = createBrowserHistory();
        axios({
          method: &quot;POST&quot;, 
          url:&quot;http://localhost:3001/users/login&quot;, 
          data:  this.state
        }).then((response)=&gt;{
          console.log(response.data.user.admin)
          if (response.data.success === true &amp;&amp; response.data.user.admin === false){
           
                  const history = createBrowserHistory();
                  history.push({
                   pathname:&quot;/users&quot;,
                   state:{
                   Key : response.data.user }
     });
    
        
           
          }else if(response.statusCode === 401 ){
            alert(&quot;Invalid username or password&quot;);
           window.location.reload(false);
          }
        })
      }
```

my routes.js file:
```javascript
    import React from &#39;react&#39;;
    import { Navigate } from &#39;react-router-dom&#39;;
    import DashboardLayout from &#39;./Pages/DashboardLayout&#39;;
    import AccountView from &#39;./Pages/views/account/AccountView&#39;;
    import CustomerListView from &#39;./Pages/views/customer/CustomerListView&#39;;
    import DashboardView from &#39;./Pages/views/reports/DashboardView&#39;;
    import ProductListView from &#39;./Pages/views/product/ProductListView&#39;;
    import SettingsView from &#39;./Pages/views/settings/SettingsView&#39;;
    import Home from &#39;./Pages/home&#39;;
    import About from &#39;./Pages/About&#39;;
    import Partners from &#39;./Pages/Partners&#39;;
    import Services from &#39;./Pages/services&#39;;
    import Login from &#39;./Pages/Login&#39;;
    import RD from &#39;./Pages/RD&#39;;
    import ContactUs from &#39;./Pages/contactus&#39;;
    import Apply from &#39;./Pages/apply&#39;;
    import PartnerShip from &#39;./Pages/partnership&#39;;
    import News from &#39;./Pages/News&#39;;
    const routes = [
     {
     path: &#39;users&#39;,
     element: &lt;DashboardLayout /&gt;,
     children: [
      { path: &#39;account&#39;, element: &lt;AccountView /&gt; },
      { path: &#39;customers&#39;, element: &lt;CustomerListView /&gt; },
      { path: &#39;dashboard&#39;, element: &lt;DashboardView /&gt; },
      { path: &#39;products&#39;, element: &lt;ProductListView /&gt; },
      { path: &#39;settings&#39;, element: &lt;SettingsView /&gt; }
      ]
     },
    {
    path: &#39;/&#39;,
    element: &lt;Home /&gt;,
    },
    {
    path: &#39;about&#39;,
    element: &lt;About /&gt;
    },
     {path: &#39;partners&#39;,
     element: &lt;Partners /&gt;,
    
    },
    {
    path: &#39;services&#39;,
    element: &lt;Services /&gt;,
    
    },
    {
    path: &#39;contactus&#39;,
    element: &lt;ContactUs /&gt;,
    
    },
    {
    path: &#39;login&#39;,
    element: &lt;Login /&gt;,
    
     },{
    path: &#39;RD&#39;,
    element: &lt;RD /&gt;,
    
    },
    {
    path: &#39;apply&#39;,
    element: &lt;Apply /&gt;,
    
     },
     {
    path: &#39;partnership&#39;,
    element: &lt;PartnerShip /&gt;,
    
     },
     {
    path: &#39;News&#39;,
    element: &lt;News /&gt;,
    
     }
    ];

    export default routes;
```

                                                                                                                               

using history with react-router-dom v6

After `npm start`, the browser gives the error: 

&gt; Failed to compile ./src/components/App/App.js Module not found: Can&#39;t resolve &#39;react-router-dom&#39;.

React-router-dom has been added to the dependencies in npm and so has react-router and react. 

Project has been created using the `create-react-app myapp` cmd line. This is runned on a localhost, node server. I have an api and app folder inside my project folder. I have tried various things. Updated manually my package.json inside the app folder, reinstalled react-router-dom, delete the package-lock.json in the app folder and reinitialize it. My api folder holds nothing but node_modules, my api file, route.js, config.js, index.js and also a package.json and package-lock.json. I have tried the npm build command in my app folder. It just creates a &#39;build&#39; folder which holds the same files as my public folder inside my app folder. I also tried running `yarn add react-router-dom`.

    //=========App.js file=========

    //dependencies
    import React, { Component } from &#39;react&#39;;
    import { BrowserRouter as Router, Route } from &#39;react-router-dom&#39;;

    //components
    import Header from &#39;../Header/Header&#39;;
    import Footer from &#39;../Footer/Footer&#39;;
    import Home from &#39;../Pages/Home&#39;;
    import StudentOverview from &#39;../Pages/StudentOverview&#39;;
    import StudentDetails from &#39;../Pages/StudentDetails&#39;;
    import Management from &#39;../Pages/Management&#39;;
    import StudentAdd from &#39;../Pages/StudentAdd&#39;;
    import Exercise from &#39;../Exercise/Exercise&#39;;

    //includes
    import &#39;../../../public/css/kdg-fonts.css&#39;;
    import &#39;../../../public/css/normalize.css&#39;;
    import &#39;../../../public/css/responsive.css&#39;;
    import &#39;../../../public/css/say-my-name.css&#39;;
    import &#39;../../../public/css/style.css&#39;;

    //Run
    class App extends Component {
      render() {
        return (
          &lt;Router&gt;
            &lt;div className=&quot;App&quot;&gt;
              &lt;Route path=&#39;*&#39; component={Header} /&gt;
              &lt;Route path=&#39;*&#39; component={Footer} /&gt;
              &lt;Route exact path=&#39;/&#39; component={Home} /&gt;
              &lt;Route exact path=&#39;/studenten&#39; component={StudentOverview} /&gt;
              &lt;Route exact path=&#39;/studenten/:id&#39; component={StudentDetails} /&gt;
              &lt;Route exact path=&#39;/beheer&#39; component={Management} /&gt;
              &lt;Route exact path=&#39;/beheer/add&#39; component={StudentAdd} /&gt;
              &lt;Route exact path=&#39;/oefenen&#39; component={Exercise} /&gt;
            &lt;/div&gt;
          &lt;/Router&gt;
        );
      }
    }

    export default App;

    //=========appfolder/package.json file=========

    {
      &quot;name&quot;: &quot;saymyname&quot;,
      &quot;version&quot;: &quot;0.1.0&quot;,
      &quot;private&quot;: true,
      &quot;dependencies&quot;: {
        &quot;react&quot;: &quot;^16.7.0&quot;,
        &quot;react-dom&quot;: &quot;^16.7.0&quot;,
        &quot;react-scripts&quot;: &quot;2.1.1&quot;
      },
      &quot;scripts&quot;: {
        &quot;start&quot;: &quot;react-scripts start&quot;,
        &quot;build&quot;: &quot;react-scripts build&quot;,
        &quot;test&quot;: &quot;react-scripts test&quot;,
        &quot;eject&quot;: &quot;react-scripts eject&quot;
      },
      &quot;eslintConfig&quot;: {
        &quot;extends&quot;: &quot;react-app&quot;
      },
      &quot;browserslist&quot;: [
        &quot;&gt;0.2%&quot;,
        &quot;not dead&quot;,
        &quot;not ie &lt;= 11&quot;,
        &quot;not op_mini all&quot;
      ],
      &quot;devDependencies&quot;: {
        &quot;gulp&quot;: &quot;^4.0.0&quot;,
        &quot;gulp-changed&quot;: &quot;^3.2.0&quot;,
        &quot;gulp-clean-css&quot;: &quot;^4.0.0&quot;,
        &quot;gulp-rename&quot;: &quot;^1.4.0&quot;,
        &quot;gulp-sass&quot;: &quot;^4.0.2&quot;,
        &quot;gulp-uglify&quot;: &quot;^3.0.1&quot;
      }
    }


&gt; UPDATE: `npm install -S react-router-dom` resolved the error.

Failed to compile. Module not found: Can&#39;t resolve &#39;react-router-dom&#39;

I use `react-router-dom` for routing in my `React` application. Part of my app extracted in another package. List of dependencies looks like this:

**./app/dashboard/package.json**

    {
      &quot;dependencies&quot;: {
        &quot;@app/components&quot;: &quot;^1.0.0&quot;,
        &quot;react&quot;: &quot;^16.8.5&quot;,
        &quot;react-dom&quot;: &quot;^16.8.5&quot;,
        &quot;react-router-dom&quot;: &quot;^5.0.0&quot;
      }
    }

**./app/components/package.json**

    {
      &quot;peerDependencies&quot;: {
        &quot;react-router-dom&quot;: &quot;^5.0.0&quot;
      }
    }

When I use components from `@app/components` which require components from `react-router-dom` I getting this errors:

    Uncaught Error: Invariant failed: You should not use &lt;Route&gt; outside a &lt;Router&gt; 
    The above error occurred in the &lt;Context.Consumer&gt; component:
    Uncaught (in promise) Error: Invariant failed: You should not use &lt;Route&gt; outside a &lt;Router&gt;

Why throws this error? In `App.js` I use `BrowserRouter`

    import React, { Suspense } from &#39;react&#39;;
    import { Switch, Route } from &#39;react-router-dom&#39;;
    import { Placeholder } from &#39;@app/components&#39;;

    const Auth = React.lazy(() =&gt; import(/* webpackPrefetch: true */ &#39;./pages/Auth&#39;));
    const Index = React.lazy(() =&gt; import(/* webpackPrefetch: true */ &#39;./pages/Index&#39;));
    
    const App = () =&gt; (
      &lt;Suspense fallback={&lt;Placeholder /&gt;}&gt;
        &lt;Switch&gt;
          &lt;Route path=&quot;/auth&quot; component={Auth} /&gt;
          &lt;Route path=&quot;/&quot; component={Index} /&gt;
        &lt;/Switch&gt;
      &lt;/Suspense&gt;
    );
    
    export default App;

**client.jsx**

    import React from &#39;react&#39;;
    import { render } from &#39;react-dom&#39;;
    import { BrowserRouter } from &#39;react-router-dom&#39;;
    
    import App from &#39;./App&#39;;
    
    render(
      &lt;BrowserRouter&gt;
        &lt;App /&gt;
      &lt;/BrowserRouter&gt;,
      document.getElementById(&#39;root&#39;),
    );



Invariant failed: You should not use &lt;Route&gt; outside a &lt;Router&gt;

I am trying to upgrade to React Router v6 (`react-router-dom 6.0.1`).

Here is my updated code:

    import { BrowserRouter, Navigate, Route, Routes } from &#39;react-router-dom&#39;;
    
    &lt;BrowserRouter&gt;
      &lt;Routes&gt;
        &lt;Route path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
        &lt;Route path=&quot;/lab&quot; element={&lt;Lab /&gt;} /&gt;
        &lt;Route render={() =&gt; &lt;Navigate to=&quot;/&quot; /&gt;} /&gt;
      &lt;/Routes&gt;
    &lt;/BrowserRouter&gt;

The last `Route` is redirecting the rest of paths to `/`.

However, I got an error

&gt; TS2322: Type &#39;{ render: () =&gt; Element; }&#39; is not assignable to type &#39;IntrinsicAttributes &amp; (PathRouteProps | LayoutRouteProps | IndexRouteProps)&#39;. &#160;&#160;Property &#39;render&#39; does not exist on type &#39;IntrinsicAttributes &amp; (PathRouteProps | LayoutRouteProps | IndexRouteProps)&#39;.

However, based on [the doc](https://reactrouter.com/docs/en/v6/upgrading/v5#remove-redirects-inside-switch), it does have `render` for `Route`. How to use it correctly?

How to redirect in React Router v6?

How should you pass props with the `Redirect` component without having them exposed in the url? 

Like this `&lt;Redirect to=&quot;/order?id=123 /&gt;&quot;`? I&#39;m using `react-router-dom`.


ReactJS - Pass props with Redirect component

I am trying to use routing for the first time and followed the exact instructions from [Udemy][1]:

### File *App.js*:

    import { Route } from &quot;react-router-dom&quot;;
    import Welcome from &quot;./Pages/Welcome&quot;;
    import Game from &quot;./Pages/Game&quot;;
    import Leaderboard from &quot;./Pages/Leaderboard&quot;;

    function App() {
        return (
            &lt;div&gt;
                &lt;Route path = &quot;/welcome&quot;&gt;
                    &lt;Welcome /&gt;
                &lt;/Route&gt;
                &lt;Route path = &quot;/game&quot;&gt;
                    &lt;Game /&gt;
                &lt;/Route&gt;
                &lt;Route path = &quot;/leaderboard&quot;&gt;
                    &lt;Leaderboard /&gt;
                &lt;/Route&gt;
            &lt;/div&gt;
        );
    }

    export default App;

### File *index.js*

    import ReactDOM from &#39;react-dom&#39;;
    import { BrowserRouter } from &#39;react-router-dom&#39;;
    import App from &quot;./App&quot;;

    ReactDOM.render(
        &lt;BrowserRouter&gt;
            &lt;App /&gt;
        &lt;/BrowserRouter&gt;,
        document.getElementById(&#39;root&#39;)
    );

I get the following error:

&gt; Error: A Route is only ever to be used as the child of &lt;Routes&gt;
&gt; element, never rendered directly. Please wrap your Route in a Routes.

Where have I gone wrong?

  [1]: https://en.wikipedia.org/wiki/Udemy





Error &quot;Error: A &lt;Route&gt; is only ever to be used as the child of &lt;Routes&gt; element&quot;

On early versions we can go back to **previous route** using **history**.

    history.goBack()

How I can achieve that with **v6** of **react-router-dom**?

How to go back to previous route in react-router-dom v6

I am trying to understand the difference between ```BrowserRouter``` and ```Router``` of the ```react-router-dom``` (v5) package and what difference it makes for my example below.


The documentation says:

&gt; **BrowserRouter**
&gt; A &lt;Router&gt; that uses the HTML5 history API (pushState,
&gt; replaceState and the popstate event) to keep your UI in sync with the
&gt; URL.

Source: https://reacttraining.com/react-router/web/api/BrowserRouter

&gt; **Router**
&gt; The common low-level interface for all router components. Typically
&gt; apps will use one of the high-level routers instead: BrowserRouter, HashRouter, MemoryRouter, NativeRouter, StaticRouter

Source: https://reacttraining.com/react-router/web/api/Router

From what I understand is that I should be using **BrowserRouter** for my HTML5 browser apps and I have been doing this so far.


**history.push(...) example:**

I am trying to perform a ```history.push(&#39;/myNewRoute&#39;)``` within a thunk:

```es6
import history as &#39;./history&#39;;

...

export function someAsyncAction(input) {
  return dispatch =&gt; {
    fetch(`${API_URL}/someUrl`, {
      method: &#39;POST&#39;,
      headers: {
        &#39;Accept&#39;: &#39;application/json&#39;,
        &#39;Content-Type&#39;: &#39;application/json&#39;
      },
      body: JSON.stringify({ input }),
    }).then(() =&gt; {
      history.push(&#39;/myNewRoute&#39;);
    }).catch((err) =&gt; {
      dispatch(setError(err));
    })
  };
};
```

```history``` is defined as this module:

```es6
import { createBrowserHistory } from &#39;history&#39;;

export default createBrowserHistory();
```

and the ```history``` is also passed to my router:

```es6
import { BrowserRouter as Router } from &#39;react-router-dom&#39;;
import history as &#39;./history&#39;;

...

const App = () =&gt; (
  &lt;Router history={history}&gt;
     ...
  &lt;/Router&gt;
);
```

**Problem:** ```history.push()``` will update the URL in the browser bar but not render the component behind the route.

If I import ```Router``` instead of ```BrowserRouter```, it works:

```es6
// Does not work:
import { BrowserRouter as Router } from &#39;react-router-dom&#39;;

// Does work:
import { Router } from &#39;react-router-dom&#39;;
```



BrowserRouter vs Router with history.push()

I get a typeScript error after upgrading to  version 4
Used in useParams ()  from react-router-dom

``&quot;typescript&quot;: &quot;^4.0.2&quot;``

````
import { useParams } from &#39;react-router-dom&#39;;

const { sumParams } = useParams();

````

```
Property &#39;sumParams&#39; does not exist on type &#39;{}&#39;. 
```

The project worked great and only after the upgrade does it throw an error

TypeScript error after upgrading version 4 useParams () from react-router-dom Property &#39;sumParams&#39; does not exist on type &#39;{}&#39;

In react-router v3 I could access it with `props.location.query.foo` (if the current location was `?foo=bar`)

In `react-router-dom@4.0.0` `props.location` only has `props.location.search` with is a string like `?foo=bar&amp;other=thing`.

Perhaps I need to manually parse and deconstruct that string to find the value for `foo` or `other`.

Screenshot of `console.log(this.props)`:
[![enter image description here][1]][1]
(Note how from `?artist=band` here I&#39;d like to get the value from `artist` which is the value `band`)

  [1]: https://i.stack.imgur.com/NUR76.png

How to parse query string in react-router v4

I was trying to create a `&lt;PrivateRoute&gt;` as describe in the react-router [documents][1] using TypeScript. Can anyone help me out?

**The privateRoute in react-router document:**

    const PrivateRoute = ({ component: Component, ...rest }) =&gt; (
      &lt;Route {...rest} render={props =&gt; (
        fakeAuth.isAuthenticated ? (
          &lt;Component {...props}/&gt;
        ) : (
          &lt;Redirect to={{pathname: &#39;/login&#39;, state: { from: props.location }
       }}/&gt;
      )
     )}/&gt;
    )

**Below is my TypeScript version(it won&#39;t work) :**

    const PrivateRoute = (theProps: { path: string, component: React.SFC&lt;RouteComponentProps&lt;any&gt; | undefined&gt; | React.ComponentClass&lt;RouteComponentProps&lt;any&gt; | undefined&gt; }) =&gt; {
        return &lt;Route path={theProps.path} render={props =&gt; (
            fakeAuth.isAuthenticated ? (
                &lt;React.Component {...theProps} /&gt; &lt;!-- **** It will raise error *** --&gt;
            ) : (
                    &lt;Redirect to={{
                        pathname: &#39;/&#39;,
                        state: { from: props.location }
                    }} /&gt;
                )
        )} /&gt;
    }

The `&lt;React.Component {...thisProps} /&gt;` is not right. The error is: NodeInvocationException: inst.render is not a function
TypeError: inst.render is not a function

  [1]: https://reacttraining.com/react-router/web/example/auth-workflow

How to rewrite the protected/private route using TypeScript and React-Router 4, 5 or 6?

I have a **Dashboard** with rotating slides, each of which has a corresponding tab in **Bldgs**. Both `Dashboard.js` and `Bldgs.js` are children to my `App.js`.

When a user clicks on a specific slide `A` in `Dashboard.js`, `Dashboard` needs to tell `App.js` so that `App` can tell `Bldgs.js` to have tab `A` displayed when it routes to `Bldgs`.

I *believe* that I am passing the correct index value from `Dashboard` up to `App` and down to `Bldgs`. However, an error is being thrown in my `App.js` file stating:

`Uncaught TypeError: Cannot read property &#39;push&#39; of undefined`

My code was working fine before I started passing my `handleClick()` function to my `Dashboard` component.

**Index.js**

    import React from &#39;react&#39;;
    import ReactDOM from &#39;react-dom&#39;;
    import App from &#39;./App&#39;;
    import &#39;./index.css&#39;;
    import injectTapEventPlugin from &#39;react-tap-event-plugin&#39;;
    import MuiThemeProvider from &#39;material-ui/styles/MuiThemeProvider&#39;;
    import { BrowserRouter as Router } from &#39;react-router-dom&#39;;
    import { hashHistory } from &#39;react-router&#39;;
    
    // Needed for onTouchTap
    // http://stackoverflow.com/a/34015469/988941
    injectTapEventPlugin();

    ReactDOM.render(
      &lt;MuiThemeProvider&gt;
        &lt;Router history={hashHistory}&gt;
          &lt;App /&gt;
        &lt;/Router&gt;
      &lt;/MuiThemeProvider&gt;,
      document.getElementById(&#39;root&#39;)
    );

**App.js**

    import React from &#39;react&#39;;
    import { Route } from &#39;react-router-dom&#39;;
    import Dashboard from &#39;./Dashboard&#39;;
    import Bldgs from &#39;./Bldgs&#39;;
    
    var selectedTab;
    
    class App extends React.Component {
      constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this);
        selectedTab = 0;
      }
    
      handleClick(value) {
        selectedTab = value;
        // console.log(selectedTab);
        this.props.history.push(&#39;/Bldgs&#39;);
        // console.log(this.props);
      }
    
      render() {
        var _this = this;
    
        return (
          &lt;div&gt;
            &lt;Route exact path=&quot;/&quot; render={(props) =&gt; &lt;Dashboard {...props} handleClick={_this.handleClick} /&gt;} /&gt;
            &lt;Route path=&quot;/Bldgs&quot; component={Bldgs} curTab={selectedTab} /&gt;
          &lt;/div&gt;
        );
      }
    }
    
    export default App;

**Dashboard.js**

    import React, { Component } from &#39;react&#39;;
    import &#39;./Dashboard.css&#39;;
    import { AutoRotatingCarousel, Slide } from &#39;material-auto-rotating-carousel&#39;;
    ...

    var curIndex;

    class Dashboard extends Component {
      constructor(props) {
        super(props);
        this.handleEnter = this.handleEnter.bind(this);
        this.handleChange = this.handleChange.bind(this);
        curIndex = 0;
      }
    
      handleEnter(e) {
        // console.log(curIndex);
        this.props.handleClick(curIndex);
      }
    
      handleChange(value) {
        // console.log(value);
        curIndex = value;
      }
    
    ...
    }
    
    export default Dashboard;

**Bldgs.js**

    ...
    var curTab;

    class Bldgs extends Component {
      constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
        this.goHome = this.goHome.bind(this);
        curTab = 0;
      }

      handleChange(value) {
        this.setState({&#39;selectedTab&#39;: value});
        console.log(this.state);
      }

      goHome(e) {
        this.props.history.push(&#39;/&#39;);
      }
    
    ...
    }

    export default Bldgs;

Uncaught TypeError: Cannot read property &#39;push&#39; of undefined (React-Router-Dom)

How to implement conditional routing i.e. if and only if some conditions satisfies, then routing should occur.
For example, if and only if the user enters the correct credentials, login should be successful and the user should be able to see the welcome page.

If we directly hit some URL like `localhost:8080/welcome`, that should not be navigated to welcome page. The welcome page should only be displayed after login.

How to achieve this, can anyone help me please?

&lt;!-- language-all: lang-js --&gt;

App.js

    import React, { Component } from &#39;react&#39;;
    import Header from &#39;./Header&#39;;
    
    class App extends Component{
      render(){
       return(
         &lt;div&gt;
           &lt;Header /&gt;
         &lt;/div&gt;
       );
      }
    }
    export default App;

Header.js

    import React, { Component } from &#39;react&#39;;
    import {Link} from &#39;react-router-dom&#39;;
    import Login from &#39;./Login&#39;;
    import SignUp from &#39;./SignUp&#39;;
    
    class Header extends Component{
    render(){
      return(
        &lt;div&gt;
        &lt;nav class=&quot;navbar navbar-default&quot;&gt;
         &lt;div class=&quot;container-fluid&quot;&gt;
         &lt;ul class=&quot;nav navbar-nav&quot;&gt;
          &lt;li&gt;&lt;Link to={Login}&gt;Login&lt;/Link&gt;&lt;/li&gt;
          &lt;li&gt;&lt;Link to={Login}&gt;SignUp&lt;/Link&gt;&lt;/li&gt;
        &lt;/ul&gt;
        &lt;/div&gt;
        &lt;/nav&gt;
       
        &lt;/div&gt;
       );
     } 
    }

    export default Header;

AllRoutes.js
 
    import React, { Component } from &#39;react&#39;;
    import { Switch, Route } from &#39;react-router-dom&#39;;
    import Login from &#39;./Login&#39;;
    import SignUp from &#39;./SignUp&#39;;
    import Welcome from &#39;./Welcome&#39;;

    class AllRoutes extends Component{
     render(){
       return(
         &lt;Switch&gt; 
           &lt;Route exact path=&quot;/login&quot; component={Login} /&gt;
           &lt;Route exact path=&quot;/signup&quot; component={SignUp} /&gt;
           &lt;Route exact path=&quot;/Welcome&quot; component={Welcome} /&gt;
         &lt;/Switch&gt;
       );
      }
     }
     export default AllRoutes;

Welcome.js

    import React, { Component } from &#39;react&#39;; 
   
    class Welcome extends Component{
    render(){
     return(
      &lt;div&gt;
       &lt;h2&gt;Welcome to MainPage..&lt;/h2&gt;
      &lt;/div&gt;
      );
     }
    }
    export default Welcome;

Simple Conditional Routing in Reactjs

I need multiple nested routes in react-router-dom

***I am using v4 of react-router-dom***

I&#39;ve got my

    import { BrowserRouter as Router, Route } from &#39;react-router-dom&#39;;

and I need the components to render like so

    --- Login
    --- Home
        --- Page 1
        --- Page 2
        --- Page 3
    --- About
    --- etc

The Home component contains a Header component that is common to Page1, Page2, and, Page3 components, but is not present in Login and About.

My js code reads like so

    &lt;Router&gt;
        &lt;div&gt;
            &lt;Route path=&#39;/login&#39; component={Login} /&gt;
            &lt;Home&gt;
                &lt;Route path=&#39;/page1&#39; component={Page1} /&gt;
                &lt;Route path=&#39;/page2&#39; component={Page2} /&gt;
                &lt;Route path=&#39;/page3&#39; component={Page3} /&gt;
            &lt;/Home&gt;
            &lt;Route path=&#39;/about&#39; component={About} /&gt;
        &lt;/div&gt;
    &lt;/Router&gt;


I expect the Login component to show only on /login
When I request for /page1, /page2, /page3, they should contain the Home component and that page&#39;s content respectively.

What I get instead is the Login component rendered and below that Page1&#39;s component is rendered.

I&#39;m pretty sure that I&#39;m missing something very trivial or making a really silly mistake somewhere, and would appreciate all the help I could get. I&#39;ve been stuck with this for the last two days.

Multiple Nested Routes in react-router-dom v4


I was reading [react-router-redux examples](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux/examples) and I confused,
what is the difference beetween:

    import { Redirect } from &#39;react-router-dom&#39;
    
    ...

    &lt;Redirect to=&#39;/login&#39; /&gt; 

and 

    import { push } from &#39;react-router-redux&#39;
    
    ...
    
    push(&#39;/login&#39;)

react-router Redirect vs history.push

I am trying to use `react-router-dom` inside my react app and also I am using typescript instead of javascript. The issue here is that I can&#39;t import Route inside my component and make it work. I already installed `@types/react-router-dom` but for some reason it&#39;s still not working as expected.

This is a component that is trying to use `react-router-dom`

```import React from &quot;react&quot;;
import {BrowserRouter as Router, Route} from &quot;react-router-dom&quot;;

const App = () =&gt; {
    return (
        &lt;div&gt;
            &lt;Router&gt;
                &lt;div&gt;
                    &lt;Route path=&quot;/&quot; exact/&gt;
                &lt;/div&gt;
            &lt;/Router&gt;
        &lt;/div&gt;
    )
}

export default App;
```
And this is the error that I am getting 
```/Users/veselinkontic/Projects/givellet/frontend/src/components/index.tsx
TypeScript error in /Users/veselinkontic/Projects/givellet/frontend/src/components/index.tsx(9,37):
Type &#39;{ path: string; exact: true; }&#39; is not assignable to type &#39;IntrinsicAttributes &amp; (PathRouteProps | LayoutRouteProps | IndexRouteProps)&#39;.
  Property &#39;exact&#39; does not exist on type &#39;IntrinsicAttributes &amp; (PathRouteProps | LayoutRouteProps | IndexRouteProps)&#39;.  TS2322

     7 |             &lt;Router&gt;
     8 |                 &lt;div&gt;
  &gt;  9 |                     &lt;Route path=&quot;/&quot; exact/&gt;
       |                                     ^
    10 |                 &lt;/div&gt;
    11 |             &lt;/Router&gt;
    12 |         &lt;/div&gt;
```

And this is my package.json file in which you can see that everything is there.

```{
  &quot;name&quot;: &quot;frontend&quot;,
  &quot;version&quot;: &quot;0.1.0&quot;,
  &quot;private&quot;: true,
  &quot;dependencies&quot;: {
    &quot;@testing-library/jest-dom&quot;: &quot;^5.11.4&quot;,
    &quot;@testing-library/react&quot;: &quot;^11.1.0&quot;,
    &quot;@testing-library/user-event&quot;: &quot;^12.1.10&quot;,
    &quot;@types/jest&quot;: &quot;^26.0.15&quot;,
    &quot;@types/node&quot;: &quot;^12.0.0&quot;,
    &quot;@types/react&quot;: &quot;^17.0.0&quot;,
    &quot;@types/react-dom&quot;: &quot;^17.0.0&quot;,
    &quot;@types/react-router-dom&quot;: &quot;^5.3.2&quot;,
    &quot;react&quot;: &quot;^17.0.2&quot;,
    &quot;react-dom&quot;: &quot;^17.0.2&quot;,
    &quot;react-router-dom&quot;: &quot;^6.0.1&quot;,
    &quot;react-scripts&quot;: &quot;4.0.3&quot;,
    &quot;typescript&quot;: &quot;^4.1.2&quot;,
    &quot;web-vitals&quot;: &quot;^1.0.1&quot;
  },
  &quot;scripts&quot;: {
    &quot;start&quot;: &quot;react-scripts start&quot;,
    &quot;build&quot;: &quot;react-scripts build&quot;,
    &quot;test&quot;: &quot;react-scripts test&quot;,
    &quot;eject&quot;: &quot;react-scripts eject&quot;
  },
  &quot;eslintConfig&quot;: {
    &quot;extends&quot;: [
      &quot;react-app&quot;,
      &quot;react-app/jest&quot;
    ]
  },
  &quot;browserslist&quot;: {
    &quot;production&quot;: [
      &quot;&gt;0.2%&quot;,
      &quot;not dead&quot;,
      &quot;not op_mini all&quot;
    ],
    &quot;development&quot;: [
      &quot;last 1 chrome version&quot;,
      &quot;last 1 firefox version&quot;,
      &quot;last 1 safari version&quot;
    ]
  }
}
```

Property &#39;exact&#39; does not exist on type

I am using the new useHistory hook of React Router, which came out a few weeks ago. My React-router version is 5.1.2. My React is at version 16.10.1. You can find my code at the bottom.

Yet when I import the new useHistory from react-router, I get this error:

`Uncaught TypeError: Cannot read property &#39;history&#39; of undefined`

which is caused by this line in React-router

```
function useHistory() {
  if (process.env.NODE_ENV !== &quot;production&quot;) {
    !(typeof useContext === &quot;function&quot;) ? process.env.NODE_ENV !== &quot;production&quot; ? invariant(false, &quot;You must use React &gt;= 16.8 in order to use useHistory()&quot;) : invariant(false) : void 0;
  }

  return useContext(context).history; &lt;---------------- ERROR IS ON THIS LINE !!!!!!!!!!!!!!!!!
}
```

Since it is related to useContext and perhaps a conflict with context is at fault, I tried completely removing all calls to useContext, creating the provider, etc. However, that did nothing. Tried with React v16.8; same thing.
I have no idea what could be causing this, as every other feature of React router works fine.

***Note that the same thing happens when calling the other React router hooks, such as useLocation or useParams. 


Has anyone else encountered this? Any ideas to what may cause this?
Any help would be greatly appreciated, as I found nothing on the web related to this issue.




```
import React, {useEffect, useContext} from &#39;react&#39;;
import { BrowserRouter as Router, Route, Link } from &quot;react-router-dom&quot;;
import { Switch, useHistory } from &#39;react-router&#39;
import { useTranslation } from &#39;react-i18next&#39;;

import lazyLoader from &#39;CommonApp/components/misc/lazyLoader&#39;;
import {AppContext} from &#39;CommonApp/context/context&#39;;

export default function App(props) {
    const { i18n } = useTranslation();
    const { language } = useContext(AppContext);
    let history = useHistory();

    useEffect(() =&gt; {
        i18n.changeLanguage(language);
    }, []);

    return(
        &lt;Router&gt;
            &lt;Route path=&quot;/&quot;&gt;
                &lt;div className={testClass}&gt;HEADER&lt;/div&gt;
            &lt;/Route&gt;
        &lt;/Router&gt;
    )
}

```



Cannot read property &#39;history&#39; of undefined (useHistory hook of React Router 5)

(`react-router-dom` version: 4.1.1)

I have working routes set up, but I&#39;m a bit confused about why the `&lt;Switch&gt;` was necessary:

index.js

    import React from &#39;react&#39;;
    import { HashRouter, Route, Switch } from &#39;react-router-dom&#39;;
    
    import App from &#39;./components/App.jsx&#39;;
    import FridgePage from &#39;./components/FridgePage.jsx&#39;;
    
    ReactDOM.render(
        &lt;HashRouter&gt;
            &lt;Switch&gt;
                &lt;Route exact path=&quot;/&quot; component={App} /&gt;
                &lt;Route path=&quot;/fridge&quot; component={FridgePage} /&gt;
            &lt;/Switch&gt;
        &lt;/HashRouter&gt;,
        document.getElementById(&#39;root&#39;)
    )

App.jsx

    import Header from &#39;./Header.jsx&#39;;
    import {Link} from &#39;react-router-dom&#39;;
    
    export default class App extends React.Component {
        render() {
            console.log(this.props);
            return (
                &lt;div&gt;
                    &lt;h1&gt;Herbnew&lt;/h1&gt;
                    &lt;Link to=&quot;fridge&quot;&gt;Fridge&lt;/Link&gt;
                    {this.props.children}
                &lt;/div&gt;
            );
        }
    }

FridgePage.jsx
    
    import React from &#39;react&#39;;
    
    export default class FridgePage extends React.Component {
        render() {
            return (
                &lt;div&gt;
                    &lt;h1&gt;Fridge&lt;/h1&gt;
                    You finally found the fridge!
                &lt;/div&gt;
            );
        }
    }

I used to have a `div` wrapping the routes instead of a `Switch`. In that case, I see the `App` rendered and try to click the Fridge link, but nothing happens (the `FridgePage` isn&#39;t rendered), and no error is output into the console.

As I understand it, the only thing the `Switch` does is exclusively render the first route it matches, and the common problem as a result of omitting it is rendering both pages at once.  If my `&quot;/&quot;` route is exact, then even without the Switch, the Fridge should be the only route that matches, right? Why does it not render at all?
    


React router Switch behavior

How can I make a **Material UI** react `Button` component act as a `Link` component from **react-router-dom** without losing it&#39;s original style? Like changing the route on click.

    import Button from &#39;@material-ui/core/Button&#39;;
    
    &lt;Button variant=&quot;contained&quot; color=&quot;primary&quot;&gt;
        About Page
    &lt;/Button&gt;

To something like this, but maintaining the original `Button` style:

    import Button from &#39;@material-ui/core/Button&#39;;
    import { Link } from &#39;react-router-dom&#39;;
        
    &lt;Button variant=&quot;contained&quot; color=&quot;primary&quot;&gt;
        &lt;Link to=&quot;/about&quot;&gt;
            About Page
        &lt;/Link&gt;
    &lt;/Button&gt;

All React Router-Dom Solutions on Gang of Coders

Total of 26 React Router-Dom Solutions

React : difference between <Route exact path="/" /> and <Route path="/" />

Detect Route Change with react-router

React: 'Redirect' is not exported from 'react-router-dom'

Error: [PrivateRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

How to get query parameters in react-router v4

React-Router - Link vs Redirect vs History

Jest, Enzyme: Invariant Violation: You should not use <Route> or withRouter() outside a <Router>

using history with react-router-dom v6

Failed to compile. Module not found: Can't resolve 'react-router-dom'

Invariant failed: You should not use <Route> outside a <Router>

How to redirect in React Router v6?

ReactJS - Pass props with Redirect component

Error "Error: A <Route> is only ever to be used as the child of <Routes> element"

How to go back to previous route in react-router-dom v6

BrowserRouter vs Router with history.push()

TypeScript error after upgrading version 4 useParams () from react-router-dom Property 'sumParams' does not exist on type '{}'

How to parse query string in react-router v4

How to rewrite the protected/private route using TypeScript and React-Router 4, 5 or 6?

Uncaught TypeError: Cannot read property 'push' of undefined (React-Router-Dom)

Simple Conditional Routing in Reactjs

Multiple Nested Routes in react-router-dom v4

react-router Redirect vs history.push

Property 'exact' does not exist on type

Cannot read property 'history' of undefined (useHistory hook of React Router 5)

React router Switch behavior

How to make a Material UI react Button act as a react-router-dom Link?