[fixed] Link module adds an extra space to className

[sherodtaylor]

It renders differently on the server because the url on server is stripped by nginx and it is not an active route.

[ryanflorence]

I'm not sure why you'd want to do this. What is "invariant issue"?

[sherodtaylor]

It means that the component that has been rendered on the server is different from the component rendered on the client side. I am using nginx and stripping part of the url on the server. Which means that the active link rendered on the server side isn't going to be active when rendered on the client because the url route is different.

Uncaught Error: Invariant Violation: You're trying to render a component to the document using server rendering but the checksum was invalid. This usually means you rendered a different component type or props on the client from the one on the server, or your render() methods are impure. React cannot handle this case due to cross-browser quirks by rendering at the document root. You should look for environment dependent code in your components and ensure the props are the same client and server side:
 (client) .1">{}</p><a class=" active" href="/app"
 (server) .1">{}</p><a class="" href="/app" data-

[sherodtaylor]

@ryanflorence is there any chance this can go in the next release it would really help me out. Thanks!

[waldreiter]

I think with activeClassName=''no active class gets added, or does it? Sorry can't test right now. If that does not work, then I would suggest that it should.

[sherodtaylor]

@cody it still adds a space to the class

[waldreiter]

I would suggest something similar like this:

@@ -45,7 +45,6 @@ export var Link = React.createClass({

   getDefaultProps() {
     return {
-      className: '',
       activeClassName: 'active',
       style: {}
     };
@@ -81,8 +80,10 @@ export var Link = React.createClass({

     // ignore if rendered outside of the context of a router, simplifies unit testing
     if (router && router.isActive(to, query)) {
-      if (props.activeClassName)
-        props.className += ` ${props.activeClassName}`;
+      if (props.activeClassName) {
+        props.className = props.className ? `${props.className} ` : '';
+        props.className += `${props.activeClassName}`;
+      }

       if (props.activeStyle)
         Object.assign(props.style, props.activeStyle);

That removes the superfluous space from the class attribute and also allows to disable the active class with activeClassName=''. This is just an idea, so don't trust the code 😄

[sherodtaylor]

@cody @ryanflorence I changed it to a bug fix. The last commit fixes the extra space that is rendered when activeClassName='' like you suggested @cody :)

@@ -80,9 +80,10 @@ export var Link = React.createClass({
     });

     // ignore if rendered outside of the context of a router, simplifies unit testing
-    if (router && !props.disableActiveClass && router.isActive(to, query)) {
-      if (props.activeClassName)
-        props.className += ` ${props.activeClassName}`;
+    if (router && router.isActive(to, query)) {
+      if (props.activeClassName) {
+        props.className += props.className !== '' ? ` ${props.activeClassName}` : props.activeClassName;
+      }

[sherodtaylor]

@ryanflorence can you change the tag to bug?

[mjackson]

Thanks for your work on this @sherodtaylor, but this PR is a little messy. In order to merge, will you please:

• take out the changes to pre-built files in lib/umd (we build those only when we do a new release)
• take out the doc changes which are no longer relevant
• keep style consistent with the existing codebase (don't add extra curly parens)
• squash into a single commit, rebased on current master

If that's too much to ask, I'll do it myself. But if you'd like to make it easy on me to push the merge button, I'd really appreciate it :)

[sherodtaylor]

@mjackson no worries I can do that :)

[sherodtaylor]

@mjackson done :)

[mjackson]

Thanks @sherodtaylor !

[sherodtaylor]

@mjackson np :)