If you accidentally installed react-router-dom v6 then the withRouter HOC no longer exists. Either revert back to v5 (run npm install -s [email protected]), or roll your own custom withRouter HOC to inject the props you need or convert the components to function components and use the React hooks. Create custom withRouter Higher Order Component From … Read more
Incremental static generation is Inspired by stale-while-revalidate, so there are no intervals. Lets say that our revalidate value is 60 seconds : first user will visit the page at 100000000000 (random time in milliseconds) next.js will cache the page with an expiry date of 100000060000 other user comes at 100000040000, cache is valid, doing nothing … Read more
Four steps npm install dotenv –save Next, add the following line to your app. require(‘dotenv’).config() Then create a .env file at the root directory of your application and add the variables to it. // contents of .env REACT_APP_API_KEY = ‘my-secret-api-key’ Finally, add .env to your .gitignore file so that Git ignores it and it never … Read more
Unfortunately, keeping any key in your React client, even if you are using gitignore and an .env file, is not secure. As pointed out by Claudiu Creanga, React environment variables are embedded in the build and are publicly accessible. You should really only save API keys or secrets in your backend such as Node.js or … Read more
The difference is between relative and absolute navigation. “/page2” with a leading slash “/” is an absolute path where “page2” is a relative path. If there was a nested route from the current location “page2″ would navigate relative to the current location. Relative Routes and Links If you are navigating from “page1” to “page2” these … Read more
The current answers are outdated. React Router 6: Use the useNavigate hook: const navigate = useNavigate(); navigate(‘/other-page’, { state: { id: 7, color: ‘green’ } }); Then, you can access the state data in ‘/other-page’ via the useLocation hook: const {state} = useLocation(); const { id, color } = state; // Read values passed on … Read more
In react-router-dom version 6 there is no render prop for the Route component. You can also simplify your PrivateRoute wrapper component a bit, it doesn’t need to render more Routes and Route components. Conditionally render the component’s children or navigate to log in. const PrivateRoute = ({ auth: { isAuthenticated }, children }) => { … Read more
It isn’t safe because mutating the reference won’t trigger a render, therefore, won’t trigger the useEffect. React Hook useEffect has an unnecessary dependency: ‘ref.current’. Either exclude it or remove the dependency array. Mutable values like ‘ref.current’ aren’t valid dependencies because mutating them doesn’t re-render the component. (react-hooks/exhaustive-deps) An anti-pattern example: const Foo = () => … Read more
You are binding the functions incorrectly In your constructor you need not specify the argument, you only need to bind it like this.setDesc = this.setDesc.bind(this); Also In your onChange, when you want to pass paramters to the function you specify it with bind and not pass as arguments and bind them again . onChange={this.setDesc.bind(this, i)} … Read more
In addition to your requirements, I am adding mine: It should be done by CD, through an env variable. If I need to rename the subdirectory, I should only have to change the env variable. It should work with react-router. It should work with scss (sass) and html. Everything should work normally in dev mode … Read more