reactjs – Why do I need to hit enter in Web address bar with React Routes?

Working on a simple ReactJS/TypeScript project. My react routes rarley work unless I go to the address bar and hit enter on them, some times removing the query string.

https://www.dropbox.com/s/b7vx43eg8lk09d4/RouteBug.mov?dl=0

Thanks in Advance.

My Router component

 return (
    <>
      <Router history={browserHistory}>
        <Header />
        <Switch>
          <Redirect exact from="/" to={ROUTE_PATHS.LANDING} />
          <AppRoute path={ROUTE_PATHS.LANDING} component={PublicLanding} />
          <AppRoute path={ROUTE_PATHS.REGISTER} component={Register} />
          <AppRoute protected path={ROUTE_PATHS.DASHBOARD} component={Dashboard} />
          <AppRoute protected path={ROUTE_PATHS.FORMS} component={Forms} />
        </Switch>
        <Footer />
      </Router>
    </>
  );

And my AppRoute component:

const AppRoute: React.FC<IAppRouteProps> = ({
  protected: isPrivateRoute,
  component: Component,
  path,
  ...rest
}) => {
  const { keycloak } = useKeycloak();

  return (
    <Route
      {...rest}
      render={(props) =>
        !isPrivateRoute || (isPrivateRoute && keycloak.authenticated) ? (
          <Component {...props} />
        ) : (
          <Redirect from={path} to={ROUTE_PATHS.LANDING} />
        )
      }
    />
  );
};