What could be causing my Link to malfunction in my about.js file?

I've encountered an issue where clicking the link in my app doesn't produce any result, and I'm unsure of the cause.

Below is the content of my app.js file:

import './App.css';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import Homepage from "../src/pages/homepage";
import About from "./pages/about"
import Navbar from "../src/components/navbar";

function App() {
  return (
    <div className="App">
        <Router>
        <Navbar />
        <Routes>
          <Route path="/" element={<Homepage />} />
          <Route path="/about" element={<About />} />
        </Routes>
        </Router>
    </div>
  );
}

export default App;

Here is the code snippet from my about.js file:

import React from 'react';
import { Link } from 'react-router-dom';

function about(){
    return(
        <div>
            <Link to="/" >
                click to go back
            </Link>
        </div>

    );
}
export default about;

I have attempted using buttons, anchor tags, etc., but nothing happens when I click on them.

Answer №1

<Route path="/about" element={} />

In the document, the letter "a" is written in lowercase while in the route element it's written with Pascal case format.

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

Elements are unresponsive to scrolling inputs

My Ionic 2 input elements are not scrolling to the top when the keyboard is shown. I've tried everything I could find on Google, making sure the keyboard disable scroll is set to false. However, I still can't figure out what's causing the sc ...

Ways to navigate a div within an iframe that has been loaded

As I load a page(A) inside an iframe, the HTML structure of the embedded content is as follows: <html><body> <div id="div1"></div> <div id="div2"><button>Hello</button></div> </body></html> The ...

The process of exporting and utilizing models in Sequelize

When working on my node.js project with sequelize, I encountered a challenge of exporting and using table models in another file. I typically save table models in a folder, for instance Profile.js. module.exports = (sequelize, DataTypes) => sequelize.d ...

Looking to display several charts on a single page with varying datasets?

I have successfully integrated a doughnut chart plugin into my website. However, I would like to display multiple charts on the same page with different data sets. Below is the code snippet for the current chart being used: This is the chart I am using & ...

Exploring the integration of SQLite in a PhoneGap mobile application

I've been working on a phonegap app and trying to implement sqlite functionality. Despite following a tutorial, it's not functioning properly. Take a look at my code: <script type="text/javascript"> //add listener when device ready docume ...

Error code "ER_BAD_FIELD_ERROR" was encountered with errno 1054 and sqlState "42S22" in index 0 while using MySQL with Angular and managing sessions

When I log in, the following code is executed: <div ng-include="'partials/navbar'"></div> <form name="form" ng-submit="login(form)"> <div> <input type="text" placeholder="Email" ...

Replace Original Image with Alternate Image if Image Error Occurs Using jQuery (Bootstrap File Input)

I am currently utilizing the Bootstrap File Input component for file uploads, and it's working splendidly. I have set up the initialPreviewConfig to display the existing image on the server. However, there are instances when there is no file available ...

Identifying Changes with jQuery Event Listeners

I am trying to run some javascript code that is in the "onchange" attribute of an HTML element. For example: <input id="el" type="text" onchange="alert('test');" value="" /> Instead of using the onchange attribute, I want to trigger the e ...

`meteor.js and npm both rely on the fs module for file

I'm feeling a bit lost, as I need to use the fs package with Meteor.js framework. Starting from meteor version 0.6 onwards, I know that I should use Npm.require in the following way: var fs = Npm.require('fs'); However, when I try this, a ...

Is it necessary to install Firebase from npm when using axios with Firebase?

I have integrated axios into my project as follows: Within the src/ directory, I created a file named axios.js with the following contents: import axios from 'axios'; const instance = axios.create({ baseURL : 'https://myprojectname-11 ...

Can someone guide me on how to locate and access the port number?

In my Reactjs project root directory, I've created a .env file. This is what's inside my .env file: PORT = 30001 ... In my App.tsx file, I'm trying to access the port like this: const PORT_NUMBER = process.env.PORT; When I run yarn start ...

Discovering the ways to retrieve Axios response within a SweetAlert2 confirmation dialog

I'm struggling to grasp promises completely even after reviewing https://gist.github.com/domenic/3889970. I am trying to retrieve the response from axios within a sweetalert confirmation dialog result. Here is my current code: axios .post("/post ...

The reference to React in useContext is currently undefined

I am currently working on a React App that involves CRUD operations connected to a Rails API. The project structure is as follows: App.js -> UserIndex --> Form --> User -> User My goal is to pass a function from <App /> to its gr ...

Incorporating an HTML header into a QNetworkReply

I have implemented a customized QNetworkAccessManager and subclassed QNetworkReply to handle unique AJAX requests from a JavaScript application. It is functioning mostly as expected, but I have encountered an issue where my network replies seem to be missi ...

Tips for streamlining the transfer of essential features from a main project to its duplicate projects

In my Angular project, I have a core repository on GitHub that serves as the foundation for custom client projects. Each time a new client comes onboard, we create a clone of the core project and make customizations based on their requirements. The issue ...

An oversized image creates additional room

I currently have a board that consists of 3 blocks, with each block containing a grid of 25 squares. These squares are 40x40px in size with a margin around them, resulting in an overall size of 220px x 220px. Each square also has some space above and below ...

Utilize an icon within an input box using content and the :before pseudo-element instead of relying on

My problem is that I have a great font set up and I use it to add custom icons next to my buttons. (for example: check here) Now, I want to create an input box and place an icon before it like in this guide HERE Instead of using a background image, I wou ...

Dependency issue with webpack version "^4.0.0" in the package [email protected] has not been resolved yet

Attempting to launch a React project, with the following versions installed: React: 18.1.0 Node: 16.15.1 Package manager: npm v 8.12.1 OS: macOS Catalina 10.15.7 Any assistance in resolving these errors would be greatly appreciated! npm ERR! ERESOL ...

What is the best way to adjust the maxHeight within AccordionDetails and enable scrolling functionality?

I am looking to display a large amount of data using the Accordion component from material-ui nested inside a Box element. However, I am unsure how to customize the default styles in order to set a specific maxHeight. Is there a way for me to take control ...

Vue3 CheckBox Component: A versatile option for interactive user interfaces

Struggling with incorporating checkboxes into a separate component. I have a child component with a basic card template and checkbox - essentially, a product list where each card should have a checkbox for deletion. Currently, as I loop through an array to ...