The issue lies with the React router not functioning properly when handling root

My React Router is functioning correctly, but I encounter an error when adding params to the router. The specific error displayed is "Uncaught SyntaxError: Unexpected token <".

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute  } from 'react-router';

import App from './containers/App';
import Greetings from './containers/Greetings';
import SignupPage from './containers/signup/SignupPage';
import Screen from './containers/signup/Screen1';
import LoginPage from './containers/login/LoginPage';

export default (
    <Router history = {browserHistory}>
      <Route path = "/" component = {App}>
         <IndexRoute component = {SignupPage} />
         <Route path = "signup" component = {SignupPage} />
         <Route path = "login" component = {LoginPage} />
         <Route path = "/screen/:id" component = {Screen} />
      </Route>
    </Router>
)

Answer №1

Your router may be experiencing formatting issues - Remember, adding spaces between props could result in syntax errors. It's recommended to export to a variable named router for better practice. Take a look at this revised version of the router:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, browserHistory, IndexRoute  } from 'react-router';

import App from './containers/App';
import Greetings from './containers/Greetings';
import SignupPage from './containers/signup/SignupPage';
import Screen from './containers/signup/Screen1';
import LoginPage from './containers/login/LoginPage';



export default router = (
    <Router history={browserHistory}>
      <Route path="/" component={App}>
         <IndexRoute component = {SignupPage} />
         <Route path="signup" component={SignupPage} />
         <Route path="login" component={LoginPage} />
         <Route path="/screen/:id" component={Screen} />
      </Route>
    </Router>
)

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

Application in Node.js where users are linked to diverse databases

My node.js (along with express) product administration application is currently connected to a mongodb database that houses all the product data, and utilizes Stormpath for user management. While this setup has been working well so far, I now require the ...

Issue with ForwardRef component in Jest for React Native testing

When attempting to write a test case for my Post Detail screen, I encountered an error that stated: error occurred in the <ForwardRef> component: Here is my test class code: import React from "react"; import { NewPostScreenTemplate } from ...

unable to assign values to this.props (appears as undefined or an empty array)

Upon setting up react/redux, I encountered a peculiar issue. When my component mounts, it should render the information stored in this.props.heroes.data. However, upon logging this data, I receive an unexpected value of [{id:1,heroname:'Batman',r ...

Issue with authentication persistence between React frontend and Node.js backend causing passport not to persist user credentials

I have implemented a Node.js and express backend along with a React frontend. Currently, I am using Passport.js with the Local Authentication Strategy. The issue arises when I log in on my React login component; it works perfectly in the Node.js app.post(" ...

Error in Reactjs in production mode: net::ERR_CERT_COMMON_NAME_INVALID

My Reactjs application is deployed on a Linux server and can be access at I am using PHP APIs to fetch data, which are also hosted on the same server and accessible through However, when trying to fetch data from the API, I receive an error in the consol ...

Is it permissible to call next within a helper function?

I am currently working on setting up a basic system to handle user-input errors and prevent propagation in express. Here is what I have so far: routingFunction = (req, res, next) { //setting up a test in express-validator var test = req.assert('a ...

When the local server and SPA are running on different ports, utilizing an authentication cookie can help bridge the

I currently have a nest.js webserver running on localhost:3000, with an angular frontend served to localhost:4200 (using the dev server). These ports are set as defaults. My authentication process involves sending an access-token in a cookie to the front ...

What is the best way to create a clickable link within a textarea using ReactJS?

In my Community page, users can comment on other posts. I am facing an issue where the links shared by users in comments are not displayed correctly. The links shared by users are not being displayed properly when they comment The function I implemented ...

Discovering the properties of a class/object in a module with Node.js

Recently I delved into the world of node.js and found myself puzzled about how to discover the attributes, such as fields or properties, of a class or object from a module like url or http. Browsing through the official documentation, I noticed that it on ...

React component making repeated calls to my backend server

As a React newbie, I am currently in the process of learning and exploring the framework. I recently attempted to fetch a new Post using axios. However, upon hitting the '/getPost' URL, I noticed that the GetPost component continuously calls the ...

What is the best way to use Google Material-Design-Icons in my project once I have installed it

Once I've installed the material-design-icons package using npm, how can I incorporate them into my React application? The instructions provided here do not mention the npm method. ...

When deploying, an error is occurring where variables and objects are becoming undefined

I've hit a roadblock while deploying my project on Vercel due to an issue with prerendering. It seems like prerendering is causing my variables/objects to be undefined, which I will later receive from users. Attached below is the screenshot of the bui ...

WebStorm is maxing out the CPU at full capacity

Currently using WebStorm 11 for development in Angular2, I've noticed a significant increase in CPU usage when the IDE is open. While the ng serve command runs smoothly in the background with minimal impact on performance, opening WebStorm causes CPU ...

How can I assign the items in a list as keys to an object in redux?

I am currently utilizing Redux in combination with Reactjs. The Redux Documentation states: It's recommended to return new state objects instead of mutating the existing state. My current object's state looks like this: state = [..., {id: 6 ...

How about this: "Harness the power of nodeJS, express, and jqtpl

Having an issue with NodeJS as I am still new to it. Currently, I am using nodeJS, express, and JQTPL to follow a tutorial on calling the Github API. However, the problem lies in the Application configuration, specifically in the engine definition. va ...

Exploring the capabilities of Google Cloud Storage JSON API in a React-Native application integrated with Cloud Functions

At the moment, our application is accessing Google Cloud Storage directly from the client-side, resulting in a storage of sensitive data on the client-side. I've spent the last three days attempting to utilize the Google Cloud JSON API without success ...

The maximum property in a Mongoose schema does not have any impact or

const mongoose = require("mongoose"); const PostSchema = new mongoose.Schema( { user_id: { type: String, required: true, }, content: { type: String, max: 150, required: true, }, }, { timest ...

Pass the JavaScript variable and redirect swiftly

One of the functionalities I am working on for my website involves allowing users to submit a single piece of information, such as their name. Once they input their name, it is sent to the server via a post request, and in return, a unique URL is generated ...

Implementing Relative Time Display in a React.js Project

I am currently working on a social media application using next.js. One of the features I want to implement is displaying relative time in my project. The desired output : just now 2 minutes ago 1 hour ago 2 days I need to extract time information from ...

The JSON parsing functionality is not working as expected in my app.js file

app.js: const express = require("express"); const https = require("https"); const app = express(); const port = 3000; app.get("/",function(req,res){ const url ="https://maps.googleapis.com/maps/api/geocode/jsonaddress=1600+Amphitheatre+Parkway,+Mounta ...