Problem with React Router: Uncaught Error - Invariant Violation: The element type is not valid, a string is expected for built-in components

I am encountering an issue with react-router and unable to render my app due to this error. Here is a screenshot of the error

I have searched extensively for a solution but have not been able to find anything useful. Any help would be greatly appreciated as I am currently stuck.

import React from 'react';
import HomePage from './pages/page.create.jsx';
import { render } from 'react-dom';
import { Router, Route, IndexRoute, Link, IndexLink } from 'react-router';
import { createHistory, useBasename } from 'history';

class CreatePage extends React.Component {
    constructor (props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <div className='b-container'>
                <div className = 'test'>
                    <h1>Hello World!</h1>
                </div>
                {this.props.children}
            </div>
        );
    }
}

const routes = {
    path: '/',
    component: CreatePage,
    childRoutes: [
        { path: 'about', component: HomePage }
    ]
};

render(<Router>{routes}</Router>, document.getElementById('root'));

Answer №1

Make sure to include the history in your router setup. Here's an example of how you can do that:

const customHistory = createBrowserHistory();
ReactDOM.render(<Router history={customHistory}>{routes}</Router>, document.getElementById('app'))

Answer №2

Thank you everyone for your help. Upon further investigation, I discovered that the issue was due to a discrepancy in the version of react-router I was using. Although I attempted to utilize features from version 1.0, it turned out that version 13.5 was actually installed. To rectify the situation, I reinstalled the router and everything began working smoothly again.

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

Refresh the webpage when using the browser's back or forward button in AngularJS with ui-router

In my AngularJS app, I have configured the ui-router state as follows: $locationProvider.html5Mode(true); $stateProvider .state('index', { url: '/index?zoom&center', views: { ...

Do I require two bot logins for discord.js?

Working on my discord bot, I've been trying to incorporate a script from index.js. Should I also include bot.login at the end of cmdFunctions.js? Here is the content of index.js: const Discord = require('discord.js'); const bot = new Discor ...

One Background Image Serving Multiple Divs

Can you use one image (PNG or SVG) as the background for multiple divs? Take a look at the images below to see how it could work. And if the screen width gets smaller and the divs stack up vertically, is there a way to change the background accordingly? D ...

What is the best method for transferring a string from JavaScript to a JSON file?

Is there a way to update the value of "JSValue" in my JSON (JSValue) using JavaScript? Specifically, how can I assign JSValue to a variable called Value using JavaScript? JavaScript var Value = 1 + 1 JSON { "DATA": [ { "JSValue": "0" } ...

How can I add text to an HTML5 SVG similar to using the HTML5 <p> tag?

I am currently working on creating dynamic rectangular boxes and I am facing some difficulties with inserting text into the shapes. The SVG text requires setting x and y coordinates in separate text tags, and doesn't have built-in width and height pro ...

Unable to open a modal in Angular UI after closing the initial modal

Hey there! I've been attempting to open a modal after closing the first one, but I'm encountering an issue where the second modal appears to be opened but is actually not. I'm struggling to understand what's causing this problem. Could ...

Utilizing Next.js and Express as middleware, I am looking to configure the routes 'localhost:3000/newpage' and 'localhost:3000/newpage/' to be treated as the same route. How can I achieve this synchronization between the

I recently started using express and next, and encountered an issue while trying to set 'localhost:3000/newpage' and 'localhost:3000/newpage/' as the same route. Whenever I add a '/' at the end, it triggers a 404 error. For d ...

Unchanging Dive Field

I'm having trouble understanding why this field isn't updating with the correct number. It seems that any value less than 1 is being rounded in the alert() function. I believe all numbers are simply getting rounded down, but I'm unsure of an ...

Using Jquery's $.each() method within an ajax call can be a powerful

Is it possible for a jQuery each loop to wait for Ajax success before continuing when sending SMS to recipients from an object? I want my script to effectively send one SMS, display a success message on the DOM, and then proceed with the next recipient. O ...

Having trouble correctly parsing XML data using JavaScript

My input field contains the following XML code: <?xml version="1.0" encoding="utf-8"?> <players timestamp="1536505850"> <player id="0518" name="Eagles, Philadelphia" position="Def" team="PHI" /> <player id="10271" name="Jones, Jul ...

Error in Discord JS: Unable to access undefined properties (roles)

Currently, I am in the process of developing an event that will periodically check a MongoDB database for any expired keys and then proceed to remove a specific role from the corresponding member. const mongoose = require("mongoose") const { Disc ...

Encountering difficulties in setting up a Next.js app due to a node_modules/node-sass error

Encountering problems while attempting to set up a new nextjs application due to node_modules/node-sass issue My goal is to create a nextjs app using the command provided in their documentation (npx create-next-app@latest) with specific configurations inc ...

Display the highlighted text within the input field

Is there a library available that can create an input field with a suggestions dropdown for Male and Female where typing "M" will highlight the letters "ale," allowing for autopopulation when clicked or tabbed? The same functionality should apply for typin ...

"An error occurred: Attempting to access properties of an undefined object (specifically 'foundTicket'). While the getTickets() function, which fetches data from MongoDB using Mongoose, is working fine, the getTicketById()

I recently started working with next.js and I'm following a project tutorial by a YouTuber. Here is the link to my code: https://github.com/Fanguiee/ticketing-app/tree/edit-existing-item or you can also read below. Thank you in advance :) Screenshot: ...

Comparing Objects in an Array to Eliminate Duplicates and Make Updates in Javascript

I am working with an array of objects that is structured like this: 0: Object ConsolidatedItem_catalogId: "080808" ConsolidatedItem_catalogItem: "undefined" ConsolidatedItem_cost: "0" ConsolidatedItem_description: "Test Catalog Item" ConsolidatedItem_ima ...

How can a command in a test be executed that is located within a specific "section" in Nightwatch?

I've been utilizing nightwatch for my test automation. Within my page object, I have a "section" containing various commands. However, when attempting to call these commands in the test script, I encountered an error stating "section is not a function ...

Unable to use NodeJS await/async within an object

I'm currently developing a validation module using nodeJs and I'm facing difficulties understanding why the async/await feature is not functioning correctly in my current module. Within this module, I need to have multiple exports for validation ...

Issue with third-party react module (effector) causing Webpack error

UPDATE: After struggling with my own custom Webpack setup, I decided to switch to using react-scripts, and now everything is compiling smoothly. It seems like the issue was indeed with my Webpack/Babel configuration, but I still can't pinpoint the exa ...

Deciphering a JSON Array in JavaScript to extract specific components

I have a brief snippet for a JSON array and a JavaScript function that currently returns a single argument: <!DOCTYPE html> <html> <body> <h2>JSON Array Test</h2> <p id="outputid"></p> <script> var arrayi ...

Verifying user authorization for Microphone access prior to triggering event in React application

I have created a React component featuring a microphone button that operates as follows: OnMouseDown => Initiates audio recording by the user OnMouseUp => Ceases audio recording To elaborate, while the button is pressed down, the user can continue ...