The Switch component only ever renders a single route, the earliest match wins. As the Dashboard component is inside it, it gets unmounted whenever another route gets matched. Move this Route outside and it will work as intended with render or children.
You need to import ReactDOM in Main.js instead of App.jsx, as Main is where you are using ReactDOM to render. Also need to import React in all files that use JSX. Finally, also put react-router imports into Main, too. The way imports work is, you import things you need, in places they’re needed. It’s not … Read more
React-router’s history is meant to be used just for the navigation of your application and some persistance. I can’t see why you need to use it to open a new tab. I think you should use the window object for this. const handleSubmit = () => { console.log(“doing something”); const win = window.open(“/some-link”, “_blank”); win.focus(); … Read more
Just: <div style={{display: ‘flex’, justifyContent:’center’, alignItems:’center’, height: ‘100vh’}}> <h1> I am centered </h1> </div> or css: .centered { height: 100vh; /* Magic here */ display: flex; justify-content: center; align-items: center; } <div class=”centered”> <h1> I am centered </h1> </div>
Add a vercel.json file at the root of your project, and use “rewrites” to rewrite all incoming paths to refer to your index path. For example: { “rewrites”: [ {“source”: “/(.*)”, “destination”: “/”} ] } Check here for further information: https://vercel.com/docs/configuration#project/rewrites
The dialog in question was rendering a form, and by removing one element at a time I was able to determine that one specific text-entry field was causing the issue. The problem stemmed from the LastPass browser extension trying to provide the option of auto-fill for that field. If I shortened the width of the … Read more
The router will add a history object to your component in the props hash. So in your component, simply do: this.props.history.push(‘/mypath’) Here is a full example: In App.js: import React from ‘react’ import {BrowserRouter as Router, Route} from ‘react-router-dom’ import Login from ‘./Login’ export default class App extends React.Component { render() { return ( <Router> … Read more
I was also facing a similar issue, adding a parent Suspense fixed it for me. Something like this: <Suspense fallback={<Loader />}> <Component> <Suspense fallback={<Loader />}> <LazyLoadedComponentA /> </Suspense> </Component> <Component> <Suspense fallback={<Loader />}> <LazyLoadedComponentB /> </Suspense> </Component> </Suspense>
[email protected]+ Optional segments/parameters have been re-introduced to the library. The docs have been updated, but v6.5.0 Release Notes include the details as well. The above routes can be merged to a single route: <Route path=”/cart/:id?” element={<CartPage />} /> [email protected] After quite a bit of digging through the source code to understand how path parsing was … Read more
Using react-router-dom v6 Parent component (App) <Route path=”/something/:id” element={<Something />} /> Child component (Something) import { useParams } from “react-router-dom”; const Something = (props) => { let { id } = useParams(); useEffect(() => { console.log(`/something/${id}`); },[]); // ….. }