How do I add a react landing page to a react app?-CodePudding

I have coded a landing page in react, and in a separate project a react/typescript app. How would I go about setting my website up so that when there's no user auth, the landing page and all its features show, and when logged in change the landing page to the actual app [e.g. twitter]. I realise that in my app project folder, I will need to change a few things, but I'm not sure what exactly.

React landing page app.jsx:

import React, { useEffect, useState } from 'react';
import {
  Routes,
  Route,
  useLocation
} from 'react-router-dom';


import 'aos/dist/aos.css';
import './css/style.css';

import AOS from 'aos';

import Home from './pages/Home';
import SignIn from './pages/SignIn';
import SignUp from './pages/SignUp';
import ResetPassword from './pages/ResetPassword';
import LearnMore from './pages/LearnMore';
import AboutUs from './pages/AboutUs';
import ComingSoon from './pages/ComingSoon';
import RecosiaPay from './pages/RecosiaPay';
import RecosiaBank from './pages/RecosiaBank';
import Guides from './pages/Guides';
import PrivacyPolicy from './pages/PrivacyPolicy';
import Support from './pages/Support';
import Pitchdeck from './pages/PitchDeck';

function App() {

  const location = useLocation();

  useEffect(() => {
    AOS.init({
      once: true,
      disable: 'phone',
      duration: 700,
      easing: 'ease-out-cubic',
    });
  });

  useEffect(() => {
    document.querySelector('html').style.scrollBehavior = 'auto'
    window.scroll({ top: 0 })
    document.querySelector('html').style.scrollBehavior = ''
  }, [location.pathname]); // triggered on route change

  return (
    <>
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route path="/signin" element={<SignIn />} />
        <Route path="/signup" element={<SignUp />} />
        <Route path="/guides" element={<Guides />} />
        <Route path="/support" element={<Support />} />
        <Route path="/pitch-deck" element={<Pitchdeck />} />
        <Route path="/privacy-policy" element={<PrivacyPolicy />} />
        <Route path="/recosia-pay" element={<RecosiaPay />} />
        <Route path="/recosia-bank" element={<RecosiaBank />} />
        <Route path="/learn-more" element={<LearnMore />} />
        <Route path="/coming-soon" element={<ComingSoon />} />
        <Route path="/about-us" element={<AboutUs />} />
        <Route path="/reset-password" element={<ResetPassword />} />
      </Routes>
    </>
  );
}

export default App;

and React Typescript [actual application] App.jsx code:

import type { AppProps } from 'next/app'
import { ChakraProvider } from '@chakra-ui/react'
import { theme } from '../chakra/theme';
import Layout from "../components/Layout/Layout";
import { RecoilRoot } from 'recoil';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <RecoilRoot>
      <ChakraProvider theme={theme}>
        <Layout>
        <Component {...pageProps} />
        </Layout>
      </ChakraProvider>
    </RecoilRoot>
  );
}

export default MyApp;

CodePudding user response：

I would set up some form of a state manager using redux, or just the context api from react. Once you have this, you can separate your routes into an <AuthenticatedApp/> and an <UnauthenticatedApp/>. Based on the authentication status put on state, you can have a memoized value listening for changes to that authentication status. When changed, you can switch between which set of routes are displayed to the user!

CodePudding user response：

You can either use an authentication library like auth-0, or

You can use a state manager (useState, useContext, redux, etc.) to track whether the user has logged in or not, and show the route that you want.

This is a good pattern to start with: https://blog.logrocket.com/complete-guide-authentication-with-react-router-v6/