instead of type everything manually ,I just want to render my routes as an array. and in my app.js file, I did something like this: But its giving error , while I tried to execute it. but but, If I put like this it works: <Route path=”/” element={} /> update- non-auth layout piucture I think , I did some silly
Tag: react-router-dom
react-dom-router Link component doesnt work as expected
I have a react app with two pages— the home and trip page. The trip page is rendered with the tripID passed in through the url. My app.js looks like : I have a global navbar with a menu of different tripIds as many Link to navigate to the TripComponent. When i am at the “/” path, and I navigate
is there a way to nest routes in react
I was wondering if there is a way to nest routes in react in that Navbar is to become the parent component of dashboard and properties Just like you would do in Vue router Answer Yes, create a layout route that renders the Navbar component and an Outlet for nested routes. Example: … If you wanted to achieve the same
How can I edit the URL without changing pages?
I want to edit the URL of the page without changing to another. Something like this: Same Host, different URL, same page. I think in react-router-dom there is a function, but I don’t remember what the function is called and I looked for it but I didn’t find it Answer Try out !
Uncaught Error: Info(…): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null [closed]
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers. This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers. Closed 7 months ago. Improve this question
React Router v6 useRouteMatch equivalent
When using React Router v5, it was possible to get the path (pattern) for that route using useRouteMatch. React Router v6 offers a similar hook, useMatch; however this expects to receive the pattern you want to match against. I would use the React Router v5 hook to generate routes by combining the current path with known params. As an example,
Using App component as a home page in react (path “/”)
this is my first question here and I apologize upfront if it already been answered. I’m studying react and I started a project as well, and my question is: how can I make my App component a home page? Or do I have to create a component to do so? I´m using react-router-dom for navigation, like the code below, and
How to show not found on base url
This is the code: App Base NotFound https://codesandbox.io/s/summer-sound-giti8c?file=/src/App.js I want that when someone goes to the base url say https://giti8c.csb.app/ then NotFound component should be rendered. Currently, only Base component renders on going to the base url. Answer I want that when someone goes to the base url say “https://giti8c.csb.app/” then NotFound component should be rendered. Make an index route
How to hide the offcanvas navbar when selecting the links inside of it using react scroll?
Any idea on how to hide/back to its original state when selecting the links inside offcanvas using react scroll? Below is my code and also here is the sandbox code https://codesandbox.io/. App.js Header.js Content.js Im using the ff: react 17.0.2 react-router-dom 6.2.2 react-scroll 1.8.7 react-bootstrap offcanvas 2.1.2 https://react-bootstrap.github.io/components/offcanvas/ I’m not sure if I missed something like useState/useEffect or an attribute
Link Element Not Displaying When Selected And Styled As nth-of-type
https://codesandbox.io/s/damp-worker-k7fj6y?file=/src/App.js Why is the .row:nth-of-type(1) > .content:nth-of-type(4) .content <Link/> not displaying? Is it a bug, am I just missing something? I am not looking for an alternative approach to achieve the same result, I am simply asking why the fourth <Link/> is not displaying so I know what is going wrong. Answer Use the :nth-child psuedoselector since you are mixing