Author: John Au-Yeung

If we are encountering an “Attempted import error: ‘Switch’ is not exported from ‘react-router-dom’” message, it’s likely because we are trying to import the Switch component from react-router-dom, but it doesn’t exist.

Starting from React Router v6, Switch has been removed, and its functionality has been integrated into the Routes component. To achieve the same functionality as Switch from React Router v5 in React Router v6, weneed to use the Routes component with the element prop.

Here’s how we can refactor our code:

In React Router v5 we write

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
        <Route path="/" component={Home} />
      </Switch>
    </Router>
  );
}

Using React Router v6 we write

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );
}

In this example, the Routes component is used instead of Switch, and each Route component includes the element prop, which specifies the component to render for that route. Make sure our adjust our code accordingly based on our React Router version.

To specify a port to run a create-react-app based project, we can use the PORT environment variable. Here’s how we can do it:

1. Open our project’s package.json file.
2. Find the "scripts" section.
3. Modify the "start" script to include the PORT environment variable. It should look something like this:

"scripts": {
  "start": "PORT=3001 react-scripts start",
  ...
}

In this example, the port is set to 3001, but we can replace it with any port number we prefer.

Alternatively, we can specify the port directly in the command line when we run the npm start command:

PORT=3001 npm start

This will start our create-react-app based project on port 3001. Adjust the port number as needed for our project.

In React, JSX.Element,ReactNode, and ReactElement are types used to represent different aspects of React components and JSX elements.

JSX.Element

JSX.Element represents the result of compiling JSX code.

We would use JSX.Element when you want to specify the return type of a function component that returns JSX.

Example:

import React from 'react';

function MyComponent(): JSX.Element {
  return <div>Hello, world!</div>;
}

ReactNode

Definition: ReactNode represents a renderable child in React. It can be a React element, string, number, array, fragment, or boolean.

We would use ReactNode when you want to accept any renderable content as children in your component, regardless of its type.

Example:

import React, { ReactNode } from 'react';

interface Props {
  children: ReactNode;
}

function MyComponent({ children }: Props) {
  return <div>{children}</div>;
}

ReactElement

ReactElement represents a React element, which is a lightweight description of what to render.

We would use ReactElement when you need to check if a variable is a React element specifically.

Example:

import React, { ReactElement } from 'react';

function isElement(element: any): element is ReactElement {
  return React.isValidElement(element);
}


const element = <div>Hello, world!</div>;
if (isElement(element)) {
  console.log('This is a React element.');
}

Summary

Use JSX.Element to specify the return type of a function component.

Use ReactNode to accept any renderable content as children in your components.

Use ReactElement when you need to check if a variable is a React element specifically.

In practice, you’ll often find yourself using JSX.Element to specify return types and ReactNode to handle children in your components.

ReactElement is less commonly used directly in application code but can be useful in certain utility functions or type guards.