React 18 and React Router 6 changes

#react

Hey guys,

I just started to learn React. It seems I am quite unfortunate that recently has been changed a lot in React so finding tutorials and googling is quite confusing.

I transformed a server-side rendered Rails app into React and it worked fine for the index page, but I am now stuck with accessing the url parameter for the show. I have the same problem as described here that made me also wondering what is the right way to write a React app. React.Components is still used on react.js but these hacks suggested on SO make me feel it might not be the right way to develop my application. It would be nice to hear your opinion as I am quite lost. Maybe you can even suggest something to read about how to develop a React app 2022 :)

Top comments (1)

flp • Jun 16 '22 • Edited

I am especially curios since Rails has this often this one idiomatic way of doing something.

I was looking into a few tutorials and e.g. found code like that, which seemed to me like the modern react way:

class Component extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    let params = useParams();

    const url = `/api/v1/${params.id}.json`;

   // request and request handling
  }

  render() {
    return
  }
}

I started wondering, when I found out, that accessing the url parameter doesn't work that simple anymore within componentDidMount().

The other way I also found looks like this:

const Component = () => {

  const term = useParams();

  const url = `/api/v1/${params.id}.json`;

  // other stuff
  return
}

DEV Community

React 18 and React Router 6 changes

Top comments (1)

Read next

Exploring React 19 🔥🔥

Master React.js by Focusing on the Vital 20% Concepts

Typing App (docx)

Don't Fall Into the CDN Trap! 🪤