React-Router + Typescript error while wrapping component with Router "No overload matches this call"

Question

I have a component that was working fine until I make a snapshot test. It says "you should not use Link outside of a Router" . Then I wrapped the component with router, but it doesn't work. Here is the component:

import React from "react";
import "./Body.css";
import { Link, Router } from "react-router-dom";
const Body: React.FC = () => {
  return (
    <div className="body">
      <Router>
        <Link to="/movies">
          <div className=" body__item">
            <p>MOVIES</p>
          </div>
        </Link>
        <Link to="/series">
          <div className=" body__item">
            <p>SERIES </p>
            <img src="../../../images/placeholder.png" alt="" />
          </div>
        </Link>
      </Router>
    </div>
  );
};

export default Body;

I have @types for react-router-dom so it's not the problem. I also tried wrapping around the component.

Also the full error is:

No overload matches this call. Overload 1 of 2, '(props: RouterProps | Readonly): Router', gave the following error. Property 'history' is missing in type '{ children: Element[]; }' but required in type 'Readonly'. Overload 2 of 2, '(props: RouterProps, context: any): Router', gave the following error. Property 'history' is missing in type '{ children: Element[]; }' but required in type 'Readonly'.ts(2769) index.d.ts(99, 5): 'history' is declared here. index.d.ts(99, 5): 'history' is declared here.

there's no sense in having links in a router without having routes as well. do you not already have a router wrapping some Route components somewhere`? — azium
– azium, Commented Feb 13, 2021 at 18:51
@azium of course I have, I didn't need to mention it. As I told, this was working fine without wrapping with <Router/> — İlker
– İlker, Commented Feb 13, 2021 at 18:55
you probably need to wrap the router in your test stackoverflow.com/questions/55791828/… — azium
– azium, Commented Feb 13, 2021 at 18:59

Lakhdar · Accepted Answer · 2021-02-13 19:27:23Z

10

the router name is BrowserRouter just change your import as follows and it will work.

import { Link, BrowserRouter as Router } from "react-router-dom";

answered Feb 13, 2021 at 19:27

Lakhdar

4223 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lakhdar Over a year ago

i just got the same error on this sandebox and fixed it as i told you. take a look here: codesandbox.io/s/reverent-payne-q6ve3?file=/src/Body.tsx

İlker · Accepted Answer · 2021-02-13 19:32:42Z

2

I figured it out from another question, I forgot to add my test code and didn't mention that I'm also using Jest for testing. this is solution code:

import { render } from "@testing-library/react";
import NotFoundPage from "../Components/NotFoundPage/NotFoundPage";
import { BrowserRouter } from "react-router-dom";

const { container } = render(
  <BrowserRouter>
    <NotFoundPage />
  </BrowserRouter> 
// I was just rendering without wrapping it like this. so you should 
// wrap your component like this while testing
);

// SnapShot Test
it("Not found page matches snapshot", () => {
  expect(container).toMatchSnapshot();
});

answered Feb 13, 2021 at 19:32

İlker

2,1622 gold badges21 silver badges39 bronze badges

Collectives™ on Stack Overflow

React-Router + Typescript error while wrapping component with Router "No overload matches this call"

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related