How do I change the local host port when routing with Material-UI in react?

Question

I am using a material-ui react button with the to={''} property to route to a new page with a different port.

The application runs on localhost:3000 but when I route with this button I want to change to localhost:8080. Right now I am doing it like to={'${process.env.UAA_HOST}/uaa/create_account'} which almost works by getting the correct port, but the problem is that it just adds it onto the localhost:3000 such that the route is: http://localhost:3000/http://localhost:8080/uaa/create_account

How do I replace just the port number?

Lara · Accepted Answer · 2018-08-10 00:05:04Z

1

React router's to method is a router-aware anchor, so it is trying to link within your current page. If you want an external link it is recommended to use a <a> tag. You could use this with the material-ui Button as follows:

const MyLink = () => <a href='${process.env.UAA_HOST}/uaa/create_account'/>

<Button component={MyLink}>
    Link
</Button>

See this page of the Material-Ui docs for more details.

An alternative method, is to simply wrap your button in an <a> tag or just adding the href tag to your button.

ie:

<a href='${process.env.UAA_HOST}/uaa/create_account'>  // this
    <Button href='${process.env.UAA_HOST}/uaa/create_account'  // or this>Link here</Button>
</a>

edited Aug 10, 2018 at 0:05

answered Aug 9, 2018 at 23:27

Lara

5161 gold badge3 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Colin Sygiel Over a year ago

Ah interesting, thanks. The only problem is that I lose the material-ui Button styling. Any idea on how to retain this?

Lara Over a year ago

I am not sure with using the above method, but you could also just wrap your button component in an <a> tag. ie: <a href="..."><Button><Button/></a>

Colin Sygiel Over a year ago

Ok thanks, I did it another way and that was just simply adding href='${process.env.UAA_HOST}/uaa/create_account as a button prop

Collectives™ on Stack Overflow

How do I change the local host port when routing with Material-UI in react?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related