Current example
https://codesandbox.io/s/react-router-issue-xyw00
Situation: I have a existing reactjs app and I'm trying to build a website frame 'around' it.
So in the example
Click open layover, the content in red is the existing app.
Click Layover Dashboard, the content in the layover updates
Click close
The content in the frame has also been updated (which is not what I want).
But they both have a home and a dashboard.
I've searched for nested routing, but the questions are completely different from what I'm describing.
Is it possible to use multiple routes in different components with the same path without affecting each other? Or is there an alternative for my problem without changing any route to the existing app? Or is it just not possible to ignore routes?
Related
What is the need of showing different URL path in react application, I can display all the react component conditionally on same URL path
What is the need of showing different URL path in react application, I
can display all the react component conditionally on same URL path
While you could render a single React app component that conditionally renders dynamic content without using the URL path, using routing/navigation libraries like react-router allow the app to do this conditional content rendering based on the URL. In other words, instead of using internal conditions to render dynamic content the app is using the URL.
React apps are essentially Single Page Apps (SPAs), meaning when the React app is hosted on a server only the single root index.html file is requested and sent over the wire.
A single-page application (SPA) is a web application or website that
interacts with the user by dynamically rewriting the current web page
with new data from the web server, instead of the default method of a
web browser loading entire new pages. The goal is faster transitions
that make the website feel more like a native app.
Using different URL paths in the browser's address bar is an easy way to let the React app know what "page" the user is really trying to access. If all the user enters is "https://yourDomain.com/app" where the app is hosted, then how would they get to any specific page after the initial page load other than navigating there via the app's navigation? The URL path is what allows direct navigation via a browser, e.g. "https://yourDomain.com/app/login".
If I did understand you right you mean the use of different URLs on the same website for different pages of your website. If thats the case you want to use a libary for routing. I personally like React-Router-Dom, there is great documentation on online pages and Youtube. Just search vor react-router-dom v6.
You can add it like so: npm install react-router-dom
if not, please elaborate your question further
So I am just wondering if there are any common practices or basic guidelines as to when you should create separate pages vs just updating the components on the current page when using React? I tried to look online and could not find anything.
There are some scenarios in which you need your data or some state persisted, just some update in the UI, like Atlassian Login page.
When you write your email, it changes the route and changes some css (changes password field display from none to block).
Or in Jira next gen, there are tasks, if you click on one of the tasks in a scrum board, the page component is the same, but it brings up a modal component showing up the details of that task.
Why different routes? cause you can share the link and whenever someone navigates to that route, it brings up the page with the same UI that you saw when you copied the link.
Otherwise it's a cleaner approach to handle navigation using separate pages. So it's totally up to you and the kind of UI/UX design.
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 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.
I have some routes within my application. There are some UI changes within a same route. For example, when I click a button, I get resources from the server and display it as a list. I want to mark this point as a separate browser history, so that when the user clicks back from any next route, I am taken back directly to the list instead of the button.
For example,
Route -A > Button is displayed
Upon click,
Route A -> List is displayed
Now when item is clicked
Route B -> Item is displayed.
Now if I click back from Route B, I want to be taken back to Route A with list instead of the button. How can I achieve this?
Any ideas?
I'll assume your app is an SPA (single page application). Routing is then just another way of maintaining application state. Therefore I see two common ways to resolve this:
Create another sub-route for showing list
Implement custom state management. In this case, when you go back to your route you would restore state. Many people will use Redux for global state management, but you are free to set up your own infrastructure.
Either way, you need a way to tell your view that it should render with a state different than the default.
I hope that helps.