Home > database >  Issues setting up a router in React typescript
Issues setting up a router in React typescript

Time:11-22

I have setup multiple routers in typescript, but now in a new project i cant do it for some reason

import React from 'react';
import Container from './Components/Containers/Meplex';
import { Switch, Route, Redirect } from 'react-router';

const App: React.FC = function () {
  return (
    <Switch>
      <Route path="/" component={Container} exact />
      <Route path="/" render={() => <Redirect to="/" />} />
    </Switch>
  );
};

export default App;

I have always used it like this, with being in a

But now im getting

Module '"react-router"' has no exported member 'Redirect'. Module '"react-router"' has no exported member 'Switch'.ts

Type '{ path: string; component: FC; exact: true; }' is not assignable to type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'. Property 'component' does not exist on type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.ts(2322)

Im not having those issues in other typescript projects

CodePudding user response:

Switch and Redirect are modules from react-router-dom

So, install react-router-dom and then,

import { Switch, Route, Redirect } from "react-router-dom";
  • Related