Category: JavaScript

To fix "Cannot read property ‘pathname’ of undefined" error with React Router, we need to add the Routes properly.

For instance, we write

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

const Main = () => <h1>Hello world</h1>;

ReactDOM.render(
  <Router>
    <Route path='/' component={Main} />
  </Router>,
  document.getElementById('app')
);

if we’re using React Router v4.

We add the Router and put our Routes inside it.

To fix the ‘Trace: The node type SpreadProperty has been renamed to SpreadElement at Object.isSpreadProperty’ error with React,. we add the "@babel/plugin-proposal-object-rest-spread" plugin.

We install it with

npm i @babel/plugin-proposal-object-rest-spread --save-dev

Then we add

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-object-rest-spread"]
}

into .babelrc to add the "@babel/plugin-proposal-object-rest-spread" plugin.

Then in webpack.config.js we add

{
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        loaders: "babel-loader",
      },
    ];
  }
}

to load .js and .jsx files with babel-loader.

To render curly braces as plain text in React or JSX, we can render them in a string.

For instance, we write

return (<p>{"{{}}"}</p>)

to render curly braces by putting them all in a string.

To fix the cleanup function from React useEffect being called on every render, we should add items into the array in the 2nd argument so that the callback is only called when those items are changed.

For instance, we write

useEffect(() => {
  chatAPI.subscribe(props.friend.id);

  return () => chatAPI.unsubscribe(props.friend.id);
}, [props.friend.id]);

to call useEffect to watch the props.friend.id prop value for changes.

When this changes, the callback is called.

And the we return a function in the callback cleans up when props.friend.id is changed.