I need multiple nested routes in react-router-dom in home Page
--- Home
--- Page 1
--- Page 2
--- About
I have home page that contains two subs the active class will be worked based the path Home/HomeNested page This my requirement.
But It work on The home page is active on page load if I click nested homepage page the home page active gone.
code sandbox Link:https://codesandbox.io/s/react-router-nesting-forked-71x4z?file=/example.js
I've debuged your code a bit. You've missed exact on '/' path. Please check nesting routes I've made in /topics/[route] for you here:
sandbox
Thank you for example of NavLink. I didn't even know about this component from react-router :p
Related
I have a react app with multiple routes. On one of my routes I only want to render a certain component if the user navigated from a specific route. How do I check the previous path used to get to the current route? Thanks
I have a website with a navbar like that: Home|Shop|About.
But I want a link on my Home page that opens also the same shop page as the navbar.
How can I implement two Routers that leads to the same Page?
Simply setup for two Routers Path use one Component.
Best wishes!!
So, I'm trying to create a blog page listing.
If someone clicks a particular blog changing the route to /title/the-title-of-the-blog, and in the route file I have route as,
<Route path='/title/:title' component={BlogMicroSite}/>
it's working fine. But, If I try reaching out /title/some-tile-of-blog directly it's not working. One solution is to use HashRouter but it adds a # to URL which is not SEO friendly at all. Please Help me with some solution without # or how I can remove # in the URL.
I'm trying to redirect non-matching urls to a specific route using React-Router. For example, if user navigates to https://www.mysite/com/no-match and I don't have a corresponding route set up, it should push them to https://www.mysite/com/home.
I'm sure there's a way to do this but can't find it in docs.
For any AngularJS folks, this would be equivalent to $urlRouterProvider.otherwise('/home')
Any advice is appreciated!
There is a subcomponent of React Router that is perfect for this. You're looking for the Redirect component: Redirect Docs.
You can place this as a child to the route that you want to redirect and it should take care of this functionality for you.
I have two routers, each with one route. The first router, lets call it the page router, handles the route: "" by drawing the page furniture (header, footer, etc.). The second router, the module router, deals with a hash route, ":program/config" by showing in the middle of the page the configuration for the chosen program.
The user starts the app by going to the home page: http://host/service/home.html. This causes the page router to draw the home page. The user chooses one of the program configs from the menu and the url changes to: http://host/service/home.html#ABC/config. This causes the module router to display the correct module.
The issue is that when the page refreshes, only the module router is invoked. The page correctly renders the module content, but the menu is gone -- the page router isn't invoked.
What am I doing wrong? How do I fix this?
Your page router have a route with value "" which doesn't exist when you have a url with abc/config. It would be better if you remove the page router and leave only the module router.
Try doing your application to execute whatever the page router is doing onLoad time and leave only one router.
Creating a header and footer that are all the same on every page isn't job for a router.