No Time to Read - Copy/Paste Solution function getCurrentTimestamp () { return Date.now() } Explained The UNIX timestamp is defined as the number of seconds since January 1, 1970 UTC. In JavaScript, in order to get the current timestamp, you can use Date.now(). It’s important to note that Date.now() will return the number of milliseconds since January, 1 1970 UTC. If you need the number of seconds, you’ll need to divide the result by 1000. function getTimestampInSeconds () { return Math.floor(Date.now() / 1000) } The Date class is full of all sorts of handy methods. If you’re doing any ..read more

Check your version This post assumes you're using React Router v6. If not, find your version below. React Router v4 React Router v5 React Router is all about mapping URL paths to React components. However, sometimes you want React Router to render a component when none of the Routes match. The most common use case for this is showing a 404 page. Regardless of if you want to show off your creative side or not, having a 404 page in place is a small thing that will go a long way for the UX of your site. Luckily, this is pretty simple to do with React Router’s Routes component. Routes is the p ..read more

Check your version This post assumes you're using React Router v6. If not, find your version below. React Router v4 React Router v5 One thing I love about React Router is how composable it is. React Router doesn’t give you a house - it gives you some nails, plywood, and a hammer and trusts that you can do the rest. A more technical way to say that is React Router gives you the routing primitives upon which you can build your app. This concept really shines when it comes to what we’re going to do in this post – build our own custom Link component. What we want to do is create our own ..read more

Check your version This post assumes you're using React Router v6. If not, find your version below. React Router v4 React Router v5 React Router uses a declarative, component-based approach to routing. What that means is when you want to create a new route, you render a Route component. Route allows you to map URL paths to different React components. For example, say we wanted to render a Dashboard component whenever a user navigates to the /dashboard path. To do that, we’d render a Route that looked like this. <Route path='/dashboard' element={<Dashboard />} /> Now, what ..read more

Check your version This post assumes you're using React Router v6. If not, find your version below. React Router v4 React Router v5 One thing I love about React Router is how composable and “React like” it is. If you’re familiar with the mental model of React, then you’re probably already familiar with the mental model of React Router. This is demonstrated perfectly in the example we’re going to walk through – building a sidebar with React Router. Specifically, here’s an example of what we’ll be building. It’s a fairly basic app. We’ll have three components – Home, Profile, and ..read more

Check your version This post assumes you're using React Router v6. If not, find your version below. React Router v4 React Router v5 Respecting your user’s input is not only a solid business decision, but it also shows you care about UX. One of the most frustrating experiences a user can have is when they spend time inputting data into your app, accidentally navigate away from the form, then have to start it all over again. There are a few different approaches to fixing this UX anti-pattern, and in this post we’ll focus on how React Router specifically can help by warning the user before th ..read more

Check your version This post assumes you're using React Router v6. If not, find your version below. React Router v4 React Router v5 Here’s a scenario I want you to think through. Say you were in charge of building out the onboarding flow for your app. Unlike a generic onboarding flow, this one’s a little more personalized. The reason for that is because each step is going to change based on the result of the previous step. For example, say the first step was to get a user’s occupation and years experience. From there, we take them to the next step which, based on their occupation and exper ..read more

Check your version This post assumes you're using React Router v6. If not, find your version below. React Router v4 React Router v5 Often times when building a web app, you’ll need to protect certain routes in your application from users who don’t have the proper authentication. Protected routes let us choose which routes users can visit based on whether they are logged in. For example, you might have public routes that you want anyone accessing, like a landing page, a pricing page, and the login page. Protected routes should only be available to users that are logged in, like a dashboard ..read more

ReactReact Router v6 comes with a Routes component that, because it’s “intelligent”, makes worrying about Ambiguous Matches obsolete. However, if you’re using a version before React Router v6, you can find that post below. Ambiguous Matches with React Router v4 Ambiguous Matches with React Router v5 ..read more

Check your version This post assumes you're using React Router v6. If not, find your version below. React Router v4 React Router v5 If you’ve ever jammed with the console cowboys in cyberspace, you’ve almost certainly run into query strings before. They’re the ? and & you see appended onto URLs. Query String Example twitter.com/search?q=ui.dev&src=typed_query&f=live They’re a fundamental aspect of how the Web works as they allow you to pass state via the URL. Above is an example of a query string you’d see if you searched for ui.dev on Twitter. The query portion of this URL h ..read more