DEV Community

flp
flp

Posted on

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)

Collapse
 
flp profile image
flp • • 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
  }
}
Enter fullscreen mode Exit fullscreen mode

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
}
Enter fullscreen mode Exit fullscreen mode

Read next

mukarramjavid profile image

How to Create PDFs in React from JSON Data with jsPDF

Mukarram Javid -

harshm03 profile image

React Router: Concepts and Practical Guide(Part 1)

Harsh Mishra -

usman_awan_003 profile image

Optimizing React Performance with Concurrent Mode and Key APIs

Usman Awan -

vishesh-tiwari profile image

How to Identify and Remove Unused Files in React Projects?

Vishesh Tiwari -