Question

23

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

rated 0 times [ 25] [ 2] / answers: 1 / hits: 7787 / 3 Years ago, sat, february 13, 2021, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

deanna

Add To Favorites

Follow

Total Points: 84

Total Questions: 86

Total Answers: 107

Location: Cyprus

Member since Wed, Dec 8, 2021

3 Years ago

deanna questions

1 CastError: Cast to ObjectId failed for value XXXXXXXXXX (type string) at path _id for model XXXX

Thu, Apr 21, 22, 00:00, 2 Years ago

1 Next.js behavior on back button pressed

Mon, Sep 6, 21, 00:00, 3 Years ago

1 Use the webpack asset module with a custom output filename

Sun, Jan 17, 21, 00:00, 3 Years ago

1 React js random color

Sun, Nov 15, 20, 00:00, 4 Years ago

1 npm: cannot find module semver error while using npm command in linux ubuntu

Sun, Oct 18, 20, 00:00, 4 Years ago

View All

answered 3 Years ago harleedayanarar · Accepted Answer

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();

});