0

I've been in react for a few months. Love it. Just picked up react-router today. It seems awesome and straightforward, but my routes just aren't connecting.

I'm building a single page app with a header that has three universal react components and a container for the main content. What's happening is that the routes are simply never hitting. I put a notfoundroute in there just to confirm and catch the misses. I always end up on the NotFoundRoute. Can anyone point out anything obvious I'm missing? My f/:formName route has querystring params, but my dashboard one doesn't, do I don't think that factors in, but... FYI.

...

//===================== SPA components ============================//

var ObjectForm = require('./components/form.react');
var Dashboard = require('./components/dashboard.react');
var NotFound = require('./components/notFound.react');

...

//===================== SPA container and router ============================//

var App = React.createClass({
    getInitialState: function(){
        console.log("getInitialState");
        storeManager.appInit();
        return null;
    },
    render: function(){
        return (<RouteHandler/>);
    }
});


//===================== Universal components (always accessible on any page in the application) ============================//

//menu
React.render(
    <MainMenu />,
    document.getElementById('mainMenuContainer')
);

//bucket
React.render(
    <BucketList />,
    document.getElementById('bucketList')
);

//search
React.render(
    <InstantBox />,
    document.getElementById('globalSearchForm')
);


//===================== application routes (apply to SPA mounted into appContent div) ============================//

var routes = (
  <Route name="App" path="/" handler={App}>
    <Route name="Dashboard" path="dashboard" handler={Dashboard}/>
    <Route name="ObjectForm" path="f/:formName" handler={ObjectForm}/>
    <NotFoundRoute handler={NotFound}/>
  </Route>
);


Router.run(routes, function (Handler) {
  React.render(<Handler/>, document.getElementById('appContent'));
});
4

1 回答 1

0

For anyone wondering, looks like Router.HistoryLocation is required in Router.run. Not according to the docs on github, though.... can anyone clarify if the docs aren't current or why Router.HistoryLocation's omission would break the router? I'd be curious to learn what's going on.

In summary, use:

Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.getElementById('appContent'));
});

instead of:

Router.run(routes, function (Handler) {
  React.render(<Handler/>, document.getElementById('appContent'));
});

See also: React Router 0.11.1 routes all requests to Home

于 2015-02-20T18:58:53.070 回答