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

Next.js 15 : Incremental Static Regeneration (ISR)

Why Astro’s New Actions are the Upgrade React 19 Devs Have Been Waiting For

React Design Patterns~Container Componets / Loader Component~

Best CSS Frameworks to Use in React.js