CODEWITHSUNDEEP
javascriptreactjsreact-routerrouterreact-router-dom
gyorgio88
gyorgio88

Reputation: 517

dynamic path NavLink React

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

Upvotes: 2

Views: 5120

Answers (1)

joshua.paling
joshua.paling

Reputation: 13952

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>

Upvotes: 5

Related Questions