@Reach/Router support for NavLink

[eric-holmes]

• components: NavLink
• reactstrap version 6.5.0
• import method npm/es
• react version 16.5.0
• bootstrap version 4.1.3

What is happening?

Trying to implement Reach-Router Link component within the NavLink tag attribute.

What should be happening?

It appears to work, but there is a Console Error.

Steps to reproduce issue

1. Import the components

import { Navbar, Nav, NavItem, NavLink } from "reactstrap";
import { Link } from "@reach/router";

2. Render it out

<NavLink tag={Link} to="/bootstrap">
	Styleguide
</NavLink>

Error message in console

checkPropTypes.js:19 
Warning: Failed prop type: Invalid prop `tag` supplied to `NavLink`.
    in NavLink (created by NavBar)
    in NavBar (created by App)
    in App (created by Index)
    in Provider (created by Index)
    in Index

Code

import React from "react";
import { Navbar, Nav, NavItem, NavLink } from "reactstrap";
import { Link } from "@reach/router";

export default function() {
	return (
		<Navbar color="primary" dark expand="md">
			<Nav className="ml-auto" navbar>
				<NavItem>
					<NavLink tag={Link} to="/bootstrap">
						Styleguide
					</NavLink>
				</NavItem>
			</Nav>
		</Navbar>
	);
}

[TheSharpieOne]

What is Link? What is it's type? If it's a component then it should be a function, which is an allowed PropType. Usually the PropType validation error message say what the allowed types are and what was provided.

[eric-holmes]

Hey @TheSharpieOne thanks for the quick response! Link is a @reach/router component, which in the source is looking like an instance of React.forwardRef().

My loose understanding is that Link would be a function, but perhaps that's wrong? It's rendering properly, so that's where I'm getting weirded out. :)

[TheSharpieOne]

Seems like it returns an object, we may need to also allow objects which a certain shape (has render and $$typeof properties).

[eric-holmes]

Understood, so right now you're doing a typeof check one what's passed in, and if it's not a function constructure it's issuing the error, though it's actually letting it through.

Thanks for the heads up. I'd do a PR for this, but I think it may be a tad out of my league in terms of understanding the src structure! :(

[TheSharpieOne]

It's the prop-types lib which is doing the work, reactstrap just defines what is allowed and right now for that prop it's only allowed to be a function or a string.
It's a warning so it still works.

[eric-holmes]

Understood, so it's just allowing additional types. Cool! Maybe I'll take a crack at understanding it - happy to contribute back if I can muster it!

[sivaraj-v]

I'm also getting the same issue, looking for patch release :-)

[SilinaGeorge]

I'm also getting the same issue, looking for patch release :-)

so am i, please help

[bvanhou]

+1

[Kishanvikani]

I have updated the dependencies as per the change log - https://github.com/coreui/coreui-free-react-admin-template/blob/master/CHANGELOG.md.

But still I am facing some issues with AppSidebarNav. Is this because I have created a Protected route ?

`index.js:1 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `AppSidebarNav2`.
    in NavLink (created by AppSidebarNav2)
    in li (created by NavItem)
    in NavItem (created by AppSidebarNav2)
    in ul (created by Nav)
    in Nav (created by AppSidebarNav2)
    in div (created by ScrollBar)
    in ScrollBar (created by AppSidebarNav2)
    in AppSidebarNav2 (at DefaultLayout.js:66)
    in Suspense (at DefaultLayout.js:65)
    in div (created by AppSidebar)
    in ClickOutComponent (created by AppSidebar)
    in AppSidebar (at DefaultLayout.js:62)
    in div (at DefaultLayout.js:61)
    in div (at DefaultLayout.js:55)
    in DefaultLayout (created by ConnectFunction)
    in ConnectFunction (at ProtectedRoute.js:11)
    in Route (at ProtectedRoute.js:9)
    in ProtectedRoute (created by Route)
    in Route (created by withRouter(ProtectedRoute))
    in withRouter(ProtectedRoute) (at App.js:58)
    in Switch (at App.js:52)
    in Suspense (at App.js:51)
    in Router (at App.js:50)
    in App (created by ConnectFunction)
    in ConnectFunction (at src/index.js:14)
    in Provider (at src/index.js:13)`