The process of utilizing the Effect feature to determine the content displayed on the screen prior to another when a user clicks on a button


import {Routes, Route} from 'react-router-dom';
import HomePage from './Pages/Home';
import AboutPage from './Pages/About';
import ServicesPage from './Pages/Services';
import Meet from './Components/Meet';
import NavBar from './Components/layout/NavBar';
function App() {
  return (
    <div className="App">
        <Meet text ='my meet up'/>
     <Meet text = 'my name'/>
     <Meet text = 'contact information'/>
      <NavBar/>
     <Routes>
      <Route path='/home' element = {<HomePage/>}/>
      <Route path='/about' element = {<AboutPage/>}/>
      <Route path='/service' element = {<ServicesPage/>}/>
     </Routes>
    
    </div>
  );
}

export default App;

Interestingly, I would like the content displayed when clicking a Routes link to hide the Meet component with text='my meet up'

I made an attempt using the useState hook toggle approach to achieve this but unfortunately, it didn't work as expected. My desired outcome is for only the specific Route content to be visible on the screen when a Routes link is clicked.

Answer №1

"What I am anticipating is that when any of the PATHS links are clicked", meaning, if the route is not one of the specified routes, then display <Meet text = 'my gathering'.

<Paths>
    <Path path='/home' element = {<HomePage/>}/>
    <Path path='/about' element = {<AboutPage/>}/>
    <Path path='/services' element = {<ServicesPage/>}/>
    <Path path='*' element = {<>
        <Meet text ='my gathering'/>
        <Meet text = 'name'/>
        <Meet text = 'contact details'/>
    </>} />
</Paths>

If you intended to say "show when on path /", replace the asterisk "*" with "/".

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is the CSS property text-transform: Capitalize effective on <option> tags, and if it is, which web browsers support this functionality

I have a <select> element where I want to capitalize the text in each <option> tag. Specifically, I want the options to display as Bar and Baz instead of bar and baz. <style> option { text-transform: Capitalize; } </style> &l ...

What is the best way to increase the amount of data being sorted on AngularJS by entering information into

I have the following: Html: <div ng-controller="repeatPeople"> <br> <p> <input type="text" id="search" ng-model="searchPeople" placeholder="Search" > </p><br><br> <table border="0"> <thea ...

What is the most effective method to boost chances of establishing a connection with a server experiencing temporary timeouts as a result of a surge in visitors?

Challenge Attempting to purchase a specific item from store X, which intermittently releases limited quantities throughout the week, proves futile when loading the page in a web browser. Nearly every attempt results in a timeout error, with the product sel ...

Left-aligned arrow for Material UI select dropdown

Just starting out with material ui and I'm trying to grasp a few concepts. I have a basic select component but encountering two issues. Firstly, I'd like to move the arrow icon of the select to the left side instead of the right. Additionally, ...

Is there a way for me to detect when the progress bar finishes and execute a different function afterwards?

After clicking a button in my Javascript function, the button disappears and a progress bar is revealed. How do I trigger another function after a certain amount of time has passed? $('#go').click(function() { console.log("moveProgressBar"); ...

Steps for creating a JSON object to send batch emails using Mailgun

I am looking to dynamically create a JSON object named recipient-variables using two separate arrays - one for emails and the other for first names and IDs. How can I write JavaScript code to achieve this? 'recipient-variables': '{"[em ...

Utilizing Node.js and Express to call a function twice - once with the complete req.body and once with an empty body

Trying to articulate this may be a bit challenging, but I'll give it my best shot. I have an iOS app and Android app that both access the same node.js app through their respective web views. The iOS version is able to open the node.js app without any ...

Sending multiple ajax requests with identical data

I have been trying to send multiple requests to the same URL. The goal is to ban all the users that are included in the 'users' array by sending individual POST requests for each user. However, I am facing an issue where I keep getting the same d ...

Async/await function chaining within JavaScript for asynchronous operations

const function1 = () => { let isSuccess = false function2( // The function function2 is synchronous and always returns true or false. If the result is true, I want to change the value of isSuccess to true ) return isSuccess } The func ...

What changes can I make to this jquery code to utilize a background image instead of a background color?

Can someone help me modify this snippet to set a background-image instead of changing the background color? <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("#button_layer").hide(); $("#im ...

Searching for repeated values across disparate object fields?

Inquiring about the method to utilize mongoose for identifying duplicate values across different fields. Providing a sample document for reference: { "followers": { { "_id": "5bf6d610d3a3f31a6c75a9f4" }, ...

I am having trouble getting my ttf file to load using @font-face. It's just not working properly

Struggling to get @font-face to load properly, despite following Font Squirrel's instructions. Below is my code snippet: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>MineplexStalkers</ ...

What is the best way to implement async/await at the top level of my code?

After researching extensively on async/await, I decided to experiment myself. However, I am struggling to understand why the following code snippet does not work as expected: async function main() { var value = await Promise.resolve('Hey there&a ...

Utilizing Next.js App Router to Enable Static Site Generation for Dynamic Routes in Live Environments

For my portfolio, I am utilizing Next.js's new App Router to highlight projects with dynamic routing (src/app/projects/[id]/page.tsx). During development, useSearchParams is able to correctly retrieve the project ID. However, in production, it returns ...

ways to organize dates in JQuery

I have dates on the x-axis in a d3.js graph that are coming from a date picker. The dates chosen from the date picker get displayed on the x-axis but are not sorted. I would like to sort those dates. Please suggest something. Here is my HTML: <!docty ...

Tips for updating the text of an HTML element without deleting its children using JavaScript

Currently, I am implementing a code snippet to translate elements that contain the data-i18next attribute: const elementsToTranslate = document.querySelectorAll('[data-i18next]'); for (let i = 0; i < elementsToTranslate.length; i++) { ele ...

Sending an email through Node.js with SendGrid is not a challenge

I've got this Mailer.js file const sendgrid = require('sendgrid'); const helper = sendgrid.mail; const keys = require('../config/keys'); class Mailer extends helper.Mail { constructor({ subject, recipients ...

Acquire the nested object within a MongoDB document using its assigned ID

Looking to retrieve and edit a specific comment within a post, but not sure where to start. Here is an example of my Post data structure: { "title" : "First Node.js App", "body" : "testing 123", "st ...

Displaying a value in a React component using material-ui's TextField

Can anyone help me with printing the email a user enters into the textfield within the Dialog when a button is clicked? I have been struggling to achieve this due to my function's structure. Any guidance would be greatly appreciated. export default fu ...

Boost Efficiency by Adding a Break to an Endless Gradient Animation

I am looking to optimize the performance of an infinite gradient animation by introducing a pause. This animation was generated using to allow web browsers to take a break from constant color transitions. Below is a script showcasing the mentioned animat ...