score:1
maybe you have figured it out, but try to nest the suspense inside the route like this and do it for each route you want to have suspense fallback on:
<route exact path="/route-3"/>
<suspense fallback={<loader />}>
<component3/>
</suspense>
</route>
score:2
from the official documentation that i read, there is an example that switch component is working inside suspense component. so maybe for your issue, you can try to move switch component into suspense component (order of component suspense is higher than component switch). below is an example.
<router>
<suspense fallback={<div>loading...</div>}>
<switch>
<route exact path="/" component={home}/>
<route path="/about" component={about}/>
</switch>
</suspense>
</router>
good luck!
Source: stackoverflow.com
Related Query
- 404 route issues with React Router and Suspense
- React router with lazy and Suspense always falls back on wildcard route on page refresh
- React Router V4 protected private route with Redux-persist and React-snapshot
- React Router v5.2 - Blocking route change with createBrowserHistory and history.block
- react router app hosted on firebase issues 404 error only when trying to access route via address bar
- How to route correctly with a mixture of parent and child routes with React Router
- 404 custom page not working with useContext and React Router
- CSP issues in a project with react router and nodejs
- How to click a button and navigate to a new route with URL params using React Router 4
- How to create a new page and route programatically in React.js with React Router
- Im using React Router and I want one of my route links with path="/" to be the home page on reload.. How can you do that?
- React Router with redirection to login page but also to have 404 NotFound route
- Private Route with Redux and react router
- Multiple parallel routes with 404 route in React Router
- React Router 4: Route a page to 404 page if it doesn't match with my routing URLs
- react router v4 about how to match two url with one route and one component
- Couldn't route to private route with react router v6 and firebase v9
- Getting 404 when Auth0 callback is invoked with React router and .Net Core server app
- You should not use Route or withRouter() outside a Router when using react-router 4 and styled-component in react
- Protected route with react router v6
- How to let react router respond with 404 status code?
- How to make react router work with static assets, html5 mode, history API and nested routes?
- React Router with React 16.6 Suspense "Invalid prop `component` of type `object` supplied to `Route`, expected `function`."
- React Router v4 - Redirect to same route with different query params
- Using React Router with CDN and without webpack or browserify
- Default Route With React Router 4
- Jest/Enzyme Class Component testing with React Suspense and React.lazy child component
- Performance issues with a tree structure and shouldComponentUpdate in React / Redux
- React Router 4 with optional path AND optional parameter
- How to navigate to another page with a smooth scroll on a specific id with react router and react scroll
More Query from same tag
- Add Emoji from emoji picker to react slate
- Force update `this.props.location.search` on React Router
- Trouble fetching JSON from an Express API with React
- What is the main difference between Mobx.inject an Mobx.observer when connecting stores?
- Query inside reducer ? redux
- Convert base64 image to send as multipart/form-data
- aws-amplify forgot password function with react js sending SMS instead of email
- Write HOC as Decorator in TypeScript?
- Code splitting application sections via dynamic imports
- How to make different column sizes in the same row?
- Using API keys in a react app
- Uncaught TypeError: Cannot read property 'length' of null- while using -http://localhost:8080/
- State is not updating on axios call post Next js
- Firebase auth onAuthChange proper way to use
- React Too many re-renders when using setState hook inside callback function
- Stop Button within a paper that has an onClick activating the onClick
- React js state update issue
- React app inherit style for CSS between classes
- How change onMouseMove handler in other handler with react component?
- Data from Redux store coming late so it doesn't fill AG grid table/ react hook
- onChange return undefined in ReactJS
- How can i map through an array of object in redux in the reducer.js file to delete a user
- Replace images one after in different period of times
- Material UI - Chip Array
- How do I add user inputs on click?
- Correct way to add items to an array stored in React state with useState hook?
- upload file to single page app
- Why is my setTimeout with generator function not firing?
- Redrawing or reinitialising windyAPI in a single page app
- Setting a property of an object inside array of objects based on a match: React JS