I'm looking for a way to make the "to" property of NavLink react dynamic.

let url = 'localhost'=='localhost'? 'foo':'';
<Router>
 <NavLink to={url+'/'}>Home</NavLink>
</Router>

Work but with each new render react it adds a new url to the existing one. http://localhost/foo After render http://localhost/foo/foo ...

thanks

I'm looking for a way to make the "to" property of NavLink react dynamic.

let url = 'localhost'=='localhost'? 'foo':'';
<Router>
 <NavLink to={url+'/'}>Home</NavLink>
</Router>

Work but with each new render react it adds a new url to the existing one. http://localhost/foo After render http://localhost/foo/foo ...

thanks

• javascript
• reactjs
• react-router
• router
• react-router-dom

• Not related to your question but if you dont plan to change the value of the url in your code you should use const and not let. – Cata John Commented Sep 3, 2018 at 11:50

1 Answer 1

Try putting a slash in FRONT of the URL, too...

<NavLink to={'/'+url+'/'}>Home</NavLink>

Having no URL in front means "relative to the current path", while a URL in front means "relative to the domain name"

Or maybe a better way to acheive the same result in your case would be to put the slash in front of foo - eg:

let url = 'localhost'=='localhost'? '/foo':''; // <=== added slash 
<Router>
 <NavLink to={url+'/'}>Home</NavLink>
</Router>