React Routing - How to load pop up using Routes - javascript

What I have:
1. Login Component
2. Register Component
In Login Component, there is a link called register. It routes it to Register page. The code is simple:
<Link to='/register' className='links align-left'>Register</Link>
I want to show the register component in a popup instead. I know, I can use a Dialog Component and show the register component in that dialog. Easy, but what I don't understand is how I can set my routing so it shows the login window behind, and loads the registration component in the popup. Lemme explain with an example. See how trello board works in following screenshot. The url is https://trello.com/b/i1QoQatf/
Now when I click an item, it shows me a pop up, like in following screenshot. Please note the URL right now is https://trello.com/c/QisVDEgX/639-sort-all-dropdowns-alphaetically
Now my confusion is, how can I achieve the same for my Login and Register component. If I load my routing like this:
<Route path='/register' component={RegisterComponent} />
It will call the render method of Register Component, and then only load the Register Component. How I can route it to Register Component, and still use Login in the background. Any help please?

I think to achieve this your RegisterComponent will have to render login component and a register popup.
Within your render function you will return where RegisterPopup is your registration form rendered in popup (let's assume react modal)
<React.Fragment>
<LoginComponent/>
<RegisterPopup/>
</React.Fragment>

Adding my solution here so people will understand the concept of routing.
This is actually pretty easy, if you are using NextJS. In NextJS, we need to use a server (like express) for routing. NextJS router is very strong and give loads of flexibility. Also, NextJS Link tag is as powerful. Following is the explanation on how to achieve the url routing without loading the page.
In general, you can reach to a page two ways. 1. By clicking a link/button (for example Register Now) 2. By pasting the URL directly in browser. Let's say, I have two URLs:
https://example.com/login
https://example.com/register
Now, what I want to achieve is, when I click the "Register Now" link in my Login page, it should route my page to /register but still show Login page in the background, and Registration form in popup. But remember, I want to achieve this by making sure the Login component doesn't load twice.
With NextJS, following will be the way to do it:
We will be creating one next js page called account.js
For routing to our login page, the link for login screen will be something like following:
<Link href={{pathname: '/account', query: { mode: 'login' }}} as {'/login}>
<a>Login</a>
</Link>
The link page will route us to accounts page.
If you noticed, the link tag is not a normal href. The above link tag means, "we want to go to account page, but show url as "/login", and when we render account page, send query {mode: 'login'} to the account pages' router object.
In the render function of account page, we can make a decision in run time easily on the basis of router's query object.
render() {
const mode = this.props.router.query.mode;
return (
<div>
<LoginComponent></LoginComponent>
{/* the following line will open the register component in a popup */}
{mode === 'registration' && <PopUp><RegisterComponent></RegisterComponent></PopUp>}
</div>
)
}
In login component, we will add the registration link like following:
<Link href={{pathname: '/account', query: { mode: 'registration' }}} as={`/`}>
<a>Register Now</a>
</Link>
In above example, all we did was created a page called accounts.js. We made sure that when we route to Login window, we route it to accounts page, but we send mode: 'login'. When we click on register link, we are loading the same page - accounts.js but with a different mode: 'registration'. The render function will open the register component in popup because mode is === 'registration'. In url, it will show the address as '/register'
Please note: That is just an example code for reference, It is by no means a tested code so please bear that in mind.

Related

Reloading content after change of url with router

Lately I'm learning and trying to do chat app with react. Today I ve ran into a problem with react-router:
I'm using custom link (/string/:userid1/:userid2) which is supposed to show me chat between users and it works, but when i try to change chat to other IDs (other users) my page doesn't reload and it doesn't show me other chat untill i reload page manually.
The quesion is if there is any possibility to refresh component / page after clicking Link button
<Link to={`/chat/${params.myuid}/${friends.uid}`}><div className="text-center pt-3"><img className="friends-img" src={friends.url} alt=""/></div></Link>
Try making the variables you get form the url a part of your page state.
I mean everytime it changed there should be a change in your state.
It may help you page re-render without a manual reload.
Tip: useEffect with the route variables in the dependancy array.

Using React, when clicking on Back button, the view is updating correctly but the URL is not

I am working on a React Redux project and am having difficulty getting the URL to correctly update to align with the view being displayed when clicking on a "Back" button. Regardless of where the "Back" button takes you back to, the URL is always displaying as "Dashboard", even when the view is not the "Dashboard". I am pretty new to both React and Redux (and fairly new to Javascript/Typescript) so I am not sure exactly what is happening here, but there is a Switch statement in the routes.tsx file as shown below:
<Switch>
<Redirect exact from="/" to="/Dashboard" />
{categoryLayouts}
<CoreLayout exact path="/error" component={ErrorPageComponent} />
<CoreLayout exact path="/unauthorized" component={UnauthorizedMessageComponent} />
</Switch>
If I change "Dashboard" to another view's name, then the URL displays the change when you go back using the "Back" button, but the view displayed is still correct.
I have a feeling this is where a change needs made, but am struggling to figure out what exactly is going on here and how to resolve this issue.
The comment on your question has already informed you why it isn't working -> direct children of Switch has to be Route or Redirect.
More than that, your "CoreLayout" should be done in the parent of Router, whatever is consuming router. Router should only be responsible for "routing" -> single responsibility.
If any specific layout stuff can't be done in the parent of Router then do that specifically in the component for that route, i.e. a sidebar.

routing to page instead of component in Angular

Ok. So I know how to route from one component to another but could I route to a page that in the same component or in any other directory?
Say we are in the component home
home
home.component.html
home.component.css
home.component.ts
classes.html
and I want to redirect the user to the page classes.html when the user clicks on a button that is in home.component.html
and the link should go from /home to /home/classes
Everything in Angular is made up of components, you need to have a component with particular route configured if you want to navigate within the application.
if not you can use window.href and navigate to the particular page you need to which is not the angular way

How to open a react-bootstrap modal globally using multiple other components

I'm building an application that allows users to browse but will prompt them to login if they try to perform an action (e.g. liking something, trying to post something)
To achieve this, I have created a registration form which appears in a React-Bootstrap modal.
My question is, how can I trigger that modal to appear from multiple different components (for example a 'like' button component, or the 'sign up' component, or an 'upload' component)
I am not using redux, my application is a Meteor application.
My current idea: Add the modal open/close state to the top level component (App) and manipulate that state from the children components when the user clicks them?

How to change just piece of component in angular 2 and don't render again some things

I'm trying to create an application with angular 2.
I have a profile account for users. In this component I have a header and a cover picture exactly like Facebook. When the user clicks the about tab or another tab I want to just render related content for this tab, but I don't want to render header and cover and tabs again.
How to make this work?
I do this is my appComponent using <router-outlet></router-outlet> like this:
<header></header>
<main>
<router-outlet></router-outlet>
</main>
<footer></footer>
But I don't know how it's possible in another component. Can somebody show me an example?
You can use a second router-outlet in the profile component.
I understand you have a ProfileComponent. In that component you specify the configuration of the second router with #Routes (or #RouteConfig); you will probably have as many route configuration entries as are the tabs you want to control (one entry per tab).
Then you place in the template of ProfileComponent where it is convenient and use it as you use the root AppComponent.
I hope this is clear enough and it helps

Categories

Resources