React Router breaking with TS?

1

Hey guys, I have an issue accessing the history prop in my Header component that is in the <BrowserRouter> and I get this error:

Type '{}' is missing the following properties from type 'RouteComponentProps<{}, StaticContext, PoorMansUnknown>': history, location, match  TS2739

Here is the code:

import React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { Home } from './pages/Home';
import { Register } from './pages/registerPage/Register';
import { Login } from './pages/loginPage/Login';
import { Admin } from './pages/Admin';
import { Forum } from './pages/Forum';
import { Header } from './components/header/Header';

export const Routes: React.FC = () => {
  return (
    <BrowserRouter>
      <div>
        <Header />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exact path="/register" component={Register} />
          <Route exact path="/login" component={Login} />
          <Route exact path="/forum" component={Forum} />
          <Route exact path="/admin" component={Admin} />
        </Switch>
      </div>
    </BrowserRouter>
  );
};

And the header component, I am accessing by history.push('/'):

import React from 'react';
import { Link, RouteComponentProps } from 'react-router-dom';
import { useMeQuery, useLogoutMutation } from '../../generated/graphql';
import { setAccessToken } from '../../accessToken';

import './Header.css';
import '../../theme.css';

// interface Props {}

export const Header: React.FC<RouteComponentProps> = ({ history }) => {
  const { data, loading } = useMeQuery();
  const [logout, { client }] = useLogoutMutation();

  let body: any = null;
  let user = data?.me;

  if (loading) {
    body = null;
  } else if (data && user) {
    body = (
      <div className="loggedInInfo">
        Logged in as:
        <span className="loggedInUsername"> {user.username}</span>
      </div>
    );
  } else {
    body = null;
  }

  return (
    <header className="header">
      <div className="logout-btn-container">
        {!loading && data && data.me && (
          <button
            className="commonBtn"
            onClick={async () => {
              await logout();
              setAccessToken('');
              await client!.resetStore();
              history.push('/');
            }}
          >
            Logout
          </button>
        )}
      </div>
      {body}
      <div className="nav-link-container">
        <div>
          <Link to="/">Home</Link>
        </div>
        <div className="nav-link">
          <Link to="/forum">Forum</Link>
        </div>
        {user && user.role === 'admin' && (
          <div className="nav-link">
            <Link to="/admin">Admin</Link>
          </div>
        )}

        {user ? null : (
          <div className="register-login-container">
            <div className="nav-link">
              <Link to="/login">Login</Link>
            </div>
            <div className="nav-link">
              <Link to="/register">Sign Up</Link>
            </div>
          </div>
        )}
      </div>
    </header>
  );
};

It seems like TS is breaking all of this as it expects an object and I’ve tried to pass match and location props, but no luck. Any ideas? Thanks guys.

2

Solved. I had to wrap the Header component itself with the HOC withRouter to have access to history like so:

import React from 'react';
import { Link, RouteComponentProps, withRouter } from 'react-router-dom';
import { useMeQuery, useLogoutMutation } from '../../generated/graphql';
import { setAccessToken } from '../../accessToken';

import './Header.css';
import '../../theme.css';

const Header: React.FC<RouteComponentProps> = ({ history }) => {
  const { data, loading } = useMeQuery();
  const [logout, { client }] = useLogoutMutation();

  let body: any = null;
  let user = data?.me;

  if (loading) {
    body = null;
  } else if (data && user) {
    body = (
      <div className="loggedInInfo">
        Logged in as:
        <span className="loggedInUsername"> {user.username}</span>
      </div>
    );
  } else {
    body = null;
  }

  return (
    <header className="header">
      <div className="logout-btn-container">
        {!loading && data && data.me && (
          <button
            className="commonBtn"
            onClick={async () => {
              await logout();
              history.push('/');
              setAccessToken('');
              await client!.resetStore();
            }}
          >
            Logout
          </button>
        )}
      </div>
      {body}
      <div className="nav-link-container">
        <div>
          <Link to="/">Home</Link>
        </div>
        <div className="nav-link">
          <Link to="/forum">Forum</Link>
        </div>
        {user && user.role === 'admin' && (
          <div className="nav-link">
            <Link to="/admin">Admin</Link>
          </div>
        )}

        {user ? null : (
          <div className="register-login-container">
            <div className="nav-link">
              <Link to="/login">Login</Link>
            </div>
            <div className="nav-link">
              <Link to="/register">Sign Up</Link>
            </div>
          </div>
        )}
      </div>
    </header>
  );
};

export default withRouter(Header);
3

Better solution, found the useHistory hook for functional components.