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!!
Related
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
I am new to react and I haven't cleared all things in my mind yet.
I am currently working on a project where I need to build a react app with a landing page, a sign up/in page, an ask-a-question page and a answer-question page. Something like a stack overflow clone.
To my knowledge so far I get that I have two choices. 1) use react-router and have a function rendering what I want for each page or 2) have a state like showPage and with some if/else if render the page I want.
What is the correct way to do what I want? And in general when should I use react-router and when just state.
Thanks in advance
You'll always use routing if you have multiple pages to render. As you said you have 3 pages currently you'll need to work on.
Landing page
Sing in/ register
FAQ
What you'll want to do is wrap everything inside your app.js in Router and have say a pages folder that'll have all the pages you want to render.
In React, routers help create and navigate between the different URLs
that make up your web application. They allow your user to move
between the components of your app while preserving user state, and
can provide unique URLs for these components to make them more
shareable. With routers, you can improve your app’s user experience by
simplifying site navigation.
Read more here
You need to separate all this because when your project grows you'll thank yourself for creating specific file for specific workload. It'll be easier to manage. And when you're working on large scale projects you'd want to create layouts and have even bigger distributions.
layouts
|__admin_layout.js
|__user_layout.js
here admin layout will handle all routes specific to admin and user layout will handle all routes specific to users.
Routing helps you manage your pages much better
I have a problem with my react web app.
I have Multiple components : Home, Login, Header, Footer
I do a GET request in Header to retrieve categories from API and list it in the Header menu.
The problem is when i click on link (to go in Login or Home page), the request in Header is sent again because Header component is include in Home and in Login component.
Someone have a solution for that ?
Thanks in advance :)
check out using a router, such as React Router, to handle multiple pages without reloading layout stuff like your Header.
alternatively, you might want some caching to not hit the API every time your component renders
I have a spa that consists of a homepage, categories, about us and contact us.
They all take you to a different component except categories that should take me to a part of the homepage.
Is there a way how to do it with React-router or is there another way
to do it?
It is hard to give feedback without seeing your code.
But if I understood correctly, you want to navigate between the different components using React-Router.
You can import the Router, Switch and Route from React-Router and then in your toplevel-container component, you would create the different for each component, making the URL change based on each component, e.g. /about-us, /contact-us, etc.
If you want your categories to be part of your homepage, then you could create another inside Homepage component, where you want it displayed, if it's only rendered at a specific URL. If you want it displayed at all times, then make the link go to the /homepage URL, same as for the regular homepage component.
I want to have a create a sidebar component using React.js with links to different react applications. I know how to create an unordered list of links. Issue is how does one provide a link to a react application and when the link is clicked it dynamically puts that specific react application onto the screen?
You can use React Router to render different components when users click on different links. These components can represent entire sub-apps if you need them to.