<Link to=".."> and <IndexLink to=".."> don't generate href's under gulp dev server, browserHistory and ES6

[dariuspranskus]

Hi

I have a problem with react-router's Link and IndexLink tags not generating href's for the links under gulp dev server, browserHistory enabled and ES6

as a result I get something like this <a>Home</a> - no href.

my render code is

<nav className="navbar navbar-default">
    <div className="container-fluid">
        <IndexLink to="/" className="navbar-brand">
            <img src="images/pluralsight-logo.png"/>
        </IndexLink>
        <ul className="nav navbar-nav">
            <li><IndexLink to="/">Home</IndexLink></li>
            <li><Link to="authors">Authors</Link></li>
            <li><Link to="about">About</Link></li>
        </ul>
    </div>
</nav>

my routes

<Route path="/" component={App}>
    <IndexRoute component={HomePage} />
    <Route path="authors" component={AuthorPage} />
    <Route path="about" component={AboutPage} />
    <Route path="*" component={NotFoundPage}/>
</Route>

my gulp connect task

gulp.task('connect', function() {
    return connect.server({
        root: ['build'],
        port: config.port,
        base: config.devBaseUrl,
        livereload: true,
        middleware: function(connect, opt){
            return [historyApiFallback({})];
        }
    });

});

What could be a problem. Many thanks

Version

2.0.0

Test Case

http://jsbin.com/sacerobuxi/edit?html,js,output

Steps to reproduce

Expected Behavior

Actual Behavior

[timdorr]

Are you passing a history instance into Router?

[dariuspranskus]

Thanks @timdorr

Do you mean something like this? Then yes

<div className="container-fluid">
    <Router history={browserHistory} routes={routes}/>
</div>

Thanks

[dariuspranskus]

Routes are working themselves, if I enter say http://localhost:9505/about in the address bar the about age renders.

[taion]

We don't support relative links right now. See #2172.

[dariuspranskus]

@taion Thanks. But even <IndexLink to="/"> is not working. I also tried something like <Link to="/about"> and it doesn't work either. Could it be related to browserHistory or gulp-connect server?

Thanks.

[dariuspranskus]

The problem might be related to the fact that I want these links in the Header component which is out of RouterContext, i.e.

export default class App extends React.Component {
    render() {
        return (
            <div>
                <Header />
                <div className="container-fluid">
                    <Router>{routes}</Router>
                </div>
            </div>
        );
    }
}

If possible, could you please point me in the right direction how can I provide this RouterContex to the header?

Thanks

[Tmassery]

@dariuspranskus any luck on this? I'm having a similar issue.

[jerodb]

It's some months later but this could be useful for someone.

@Tmassery the problem was exactly what @dariuspranskus suggested: "The problem might be related to the fact that I want these links in the Header component which is out of RouterContext".

When Link is declared outside of Router it renders to an html a tag without href property.
Here is an example of how you could be sure everything in your App lives inside Router :

import things from somewhere

export default class Routes extends Component {
  render() {
    return (
      <Router history={ browserHistory }>
        <Route path='/' component={ App }>
          <IndexRoute component={ Home } />
          <Route path='about' component={ About } />
        </Route>
      </Router>
    );
  }
}

Where App is something like this:

import things from somewhere

export default class App extends React.Component {
  render() {
    return (
      <div className='app-container'>
        <Header />
        {this.props.children}
        <Footer />
      </div>
    );
  }
}

This example was made using react-router 3. It won't work using react-router 4, without modifications.