My render page

import "./splash.css";
import { Redirect } from 'react-router-dom';
import React from 'react';

function Splash() {
    const login = () => {
        console.log('123')
        return <Redirect to='/login' />;
    }
    const signup = () => {
        return <Redirect to='/sign-up' />;
    }
    return (
        <>
            <div className="bannerContainer">
                <h1>Costco Connect</h1>
            </div>
            <div className="formContainer">
                <div
                    className="loginContainer"
                    onClick={login}
                >
                    <h2>Login</h2>
                </div>
                <div
                    className="loginContainer"
                    onClick={signup}
                >
                    <h2>Sign Up</h2>
                </div>
            </div>
        </>
    );
}



export default Splash;

And my app.js

import React, { useState, useEffect } from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import { useDispatch } from 'react-redux';
import SignUpForm from './components/auth/SignUpForm';
import NavBar from './components/NavBar';
import ProtectedRoute from './components/auth/ProtectedRoute';
import UsersList from './components/UsersList';
import User from './components/User';
import { authenticate } from './store/session';
import Tickets from './components/Tickets';
import Departments from './components/Departments';
import Splash from './components/Splash';
import LoginForm from './components/auth/LoginForm';

function App() {
  const [loaded, setLoaded] = useState(false);
  const dispatch = useDispatch();

  useEffect(() => {
    (async () => {
      await dispatch(authenticate());
      setLoaded(true);
    })();
  }, [dispatch]);

  if (!loaded) {
    return null;
  }

  return (
    <BrowserRouter>
      <ProtectedRoute >
        <NavBar />
      </ProtectedRoute>
      <Switch>
        <Route path='/login' exact={true}>
          <LoginForm />
        </Route>
        <Route path='/sign-up' exact={true}>
          <SignUpForm />
        </Route>
        <ProtectedRoute path='/users' exact={true} >
          <UsersList />
        </ProtectedRoute>
        <ProtectedRoute path='/users/:userId' exact={true} >
          <User />
        </ProtectedRoute>
        <Route path='/' exact={true} >
          <Splash />
        </Route>
        <ProtectedRoute path='/departments' exact={true} >
          <Departments />
        </ProtectedRoute>
        <ProtectedRoute path='/departments/:departmentId/tickets' exact={true} >
          <Tickets />
        </ProtectedRoute>
        {/*
        <ProtectedRoute path='/departments/:departmentId/tickets/:ticketId' exact={true} >
          <Tickets />
        </ProtectedRoute> */}
      </Switch>
    </BrowserRouter>
  );
}

export default App;

Basically I'm trying to make it when you click on a div it will send you to the relevant form to either sign up or log in but I cannot figure out why the url isn't being redirected. If I throw a console.log inside of the functions they are running so I'm convinced the bug is in my app.js somewhere but I've run out of things to try. Thanks in advance, I've looked at other similar posts but no solutions have helped so far.

CodePudding user response：

The solution was to use a NavLink instead, the Redirects were only working if they were inside a conditional and then returning.