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.
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.
I have a parent component with three child components:
Navigation - Navigate Between Pages.
Pages - Loads pages using Route outlet(Employee, Department).
Save Components - Saving that form once validated.
The code looks like:
<app-nav></app-nav>
<router-outlet></router-outlet>
<app-save></app-save>
So I want some way of communication between Pages (which loads dynamically when the route is called. It contains different types of forms) and Save.
So once user click "save" from save component it should go to loaded component(employee, department) function, checks whether form is valid or not if yes then save the form.
I looked at many examples online:
Communicate between sibling components Anguar 2 (This won't work as my sibling is loading dynamically).
https://angular.io/guide/component-interaction
Also, I thought of creating a service but not sure how to get the function from the loaded components.
Any suggestion?
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
I am trying to learn ember routes and created a very simple example app. My application template has this code-
{{#link-to "testpage"}}Go to test page.{{/link-to}}
{{outlet}}
The testpage was created via ember-cli
ember g resource testpage
The testpage template contains simple text "This is a testpage".
When I run this app, the main page correctly shows a hyperlink to testpage and upon clicking, the browser URL also changes to localhost:4200/testpage but the testpage text is shown alongwith "Go to test page" hyperlink. Shouldn't it go to a new page?
Also, it might help to note that I am using pod structure in my app.
Your application template will always render, regardless of which resource/route you've navigated to. Top-level resources will render in the {{outlet}} that you have right there.
If you want the 'Go to test page.' link to be replaced, you'll need to create a separate template for it. Call it index.hbs and it will get rendered automatically for the root path.