strml / react-router-component Goto Github PK

View Code? Open in Web Editor NEW

874.0 20.0 94.0 1.56 MB

Declarative router component for React.

Home Page: http://strml.viewdocs.io/react-router-component

License: MIT License

Makefile 1.72% JavaScript 98.28%

react routing router

react-router-component's Introduction

React Router Component

Version	Compatibility
>= 0.39.0	React v15,16
>= 0.32.0	React v15
>= 0.27.0	React 0.14
0.24 - 0.26.0	React 0.13
0.23 - 0.26.0	React 0.12
0.20 - 0.22.2	React 0.11
< 0.20	React 0.10

React router component allows you to define routes in your React application in a declarative manner, directly as a part of your component hierarchy.

Project Overview

Usage is as simple as just returning a configured router component from your component's render() method:

<Locations>
  <Location path="/" handler={MainPage} />
  <Location path="/users/:username" handler={UserPage} />
  <Location path="/search/*" handler={SearchPage} />
  <Location path={/\/product\/([0-9]*)/} handler={ProductPage} />
</Locations>

Having routes defined as a part of your component hierarchy allows to dynamically reconfigure routing based on your application state. For example you can return a different set of allowed locations for anonymous and signed-in users.

React router component can dispatch based on location.pathname or location.hash if browser doesn't support History API (see hash routing).

Props can be passed through the router by setting them directly on each <Location>, or to all possible routes via a childProps hash.

Furthermore it provides advanced features like support for regex matching, full page server side rendering, multiple routers on the same page, querystring parsing, and contextual routers.

Its functionality is tested using Saucelabs on all modern browsers (IE >= 9, Chrome >= 27, Firefox >= 25, Safari >= 6 and Mobile Safari on iPhone and iPad >= 6).

Its size is about 3.5kb gzipped.

Installation

React router component is packaged on npm:

% npm install react-router-component

Docs

react-router-component's People

Contributors

Stargazers

Watchers

Forkers

rcs natew ahdinosaur dvemac mitchelkuijpers sterlingwes eiriklv matthewwithanm zerkalica chollier tjmehta jgebhardt abarreir brendanmoore parshap richardprior bradparks aetet nicholasstephan teneightfive dimensionsoftware bjoerge jeffreywescott kwiatkk1 threeaims cassus sunetos kern abovemike ghosthamlet frende joshsgman t11e chrisdew jtuchsen mgan59 pavelnikolov banyan swivelgames sloosch duan112358 megamaddu cobjet-nodeapp freshteapot mandarinconlabarba abersager synapsestudios jsg2021 maximeaubaret teosz devicehubnet rmoorman srph davidp-icracked emilmork studionone yiziz tobeyouth pengrobin nguyenducduy modulexcite migolo with-jive evilfer welljs marchon sanjaypoyzer wikifactory prasannavl samuraisam kupibilet-frontend yulingchen jregeimbal nadilas wali-s blakerxxk jasonnathan looknd phelsen mahefnawy hhy5277 dejibimbolaayo kybj77218914meizi shushuitie2017

react-router-component's Issues

How to use the npm package on browser?

I know it's not really related to the library, but I'm new to react, and I could not find this information anywhere else, but how am I supposed to export that for the browser? I actually was able to make it work using browserify, but I'm not sure if that's the best option, my only problem with that is it takes about 1.5 seconds to run the compilation (because it needs to go through all react dependencies), which I consider pretty high for a fast TDD cycle... So, how is the correct/recommended way of doing it?

Incompatibility when using webpack and reactjs from CDN

This issue may be related to #2. - browserify-shim would end in a similar issue I guess.

It seems that "react-router-component" has a problem when a module bundler (like webpack) is used and reactjs itself is loaded from the CDN via script tag (using webpack's "externals" option --> externals: {"react": "React"})

If "react-router-component" is included in the bundled file, the router fails with "ReactUpdates: must inject a batching strategy" when clicking a component.

I think this happens because "react-router-component" uses parts of the react lib directory like "invariant", "merge"... (thus get included into the bundle too) In this case, certain dependencies seem to be overwritten ("batchingStrategy") - causing duplication issues.

This limits the use of "react-router-component" and I think it would be better to not have requires to the lib directory of reactjs (at least for a distributed component like "react-router-component").

How does this problem arise?
I did not find a way to use "react-quickstart" (https://github.com/andreypopp/react-quickstart) with webpack and reactjs from CDN, but "react-router-component" in the generated bundle... this fails because of the dependencies to "react/lib".

I think the problem can be solved by using other (lightweight) helpers instead of the ones in the react/lib directory... making it dependent of reactjs only (and none of its libs).

Remove onNavigation and onBeforeNavigation from getDefaultProps

I'm using a custom router mixin as explained here.

Bundled RouterMixin defines dummy onBeforeNavigation and onNavigation in getDefaultProps:

  getDefaultProps: function() {
    return {
      onBeforeNavigation: emptyFunction,
      onNavigation: emptyFunction
    };
  },

This prevents me from providing onBeforeNavigation and onNavigation from inside my custom router since React won't merge them.

I want to reset window scroll position in onNavigation and I don't want to duplicate this behavior in many places. Ideally, I'd like it to be defined in my custom router mixin.

My suggested fix for this is to remove getDefaultProps from RouterMixin and instead add null checks where they are invoked:

  setPath: function(path, navigation, cb) {
    if (this.props.onBeforeNavigation) { // <----------- here
      this.props.onBeforeNavigation(path, navigation);
    }
    this.replaceState({
      match: matchRoutes(this.getRoutes(this.props), path),
      prefix: this.state.prefix,
      navigation: navigation
    }, function() {
      if (this.props.onNavigation) { // <----------- and here
        this.props.onNavigation();
      }
      cb();
    }.bind(this));
  },

This would make it possible for custom mixin to supply them in getDefaultProps.

Lazy loading locations

First of all thanks for a great router. Second, this is not a bug but an improvement. I'm also new to React so I might be missing something.

I'd like to lazy load pages instead of bundling them all in one big js-file.

I thought that something like this would work:

var App = React.createClass({
    mixins: [ReactAsync.Mixin],
    getInitialStateAsync: function(done) {
        // Here goes the part that should dynamically load the module - right now it's just a synchronous request
        var Forside = require("./forside")
            done(null, {
                page: Forside()
            })
    },
    render: function () {
        return (
            <html>
            <head>
                <title></title>
            </head>
            <body>
                <script src="/static/assets/main.js" async></script>
                {this.state.page}
            </body>
            </html>
        )
    }
})

But then I get a synchronization issue since I render that page on the server.

Does your router support rendering a page on the server and then lazy loading pages in the browser afterwards?

Navigating from javascript

First of all, thanks and congratulations on the library, it's the best I have seen when trying to run away from Backbone routers, and I have tried out quite a few things already.

How can I easily navigate to a route within the javascript context? For example, whenever an 401 is returned on my ajax call, I want to redirect the user to "/sessions/new".

I am still getting to know the codebase and I can't seem to find a good entry point to do this. Am I missing something?

Cannot install it, it complains about envify not being a compatible version.

npm ERR! Error: No compatible version found: envify@'^1.2.1'
npm ERR! Valid install targets:
npm ERR! ["0.0.1","0.1.0","0.2.0","1.0.0","1.0.1","1.1.0","1.2.0","1.2.1"]
npm ERR!     at installTargetsError (/home/cmeon/.nvm/v0.10.12/lib/node_modules/npm/lib/cache.js:719:10)
npm ERR!     at /home/cmeon/.nvm/v0.10.12/lib/node_modules/npm/lib/cache.js:641:10
npm ERR!     at RegClient.get_ (/home/cmeon/.nvm/v0.10.12/lib/node_modules/npm/node_modules/npm-registry-client/lib/get.js:101:14)
npm ERR!     at RegClient.<anonymous> (/home/cmeon/.nvm/v0.10.12/lib/node_modules/npm/node_modules/npm-registry-client/lib/get.js:37:12)
npm ERR!     at fs.js:266:14
npm ERR!     at Object.oncomplete (fs.js:107:15)
npm ERR! If you need help, you may report this log at:
npm ERR!     <http://github.com/isaacs/npm/issues>
npm ERR! or email it to:
npm ERR!     <[email protected]>

npm ERR! System Linux 3.11.0-18-generic
npm ERR! command "/home/cmeon/.nvm/v0.10.12/bin/node" "/home/cmeon/.nvm/v0.10.12/bin/npm" "install"

Middle mouse button does not open <Link...> in a new tab.

I've used a <Link...> element to implement links between "pages".

When I middle click a Link, it does not open in a new tab, instead it behaves as if left-clicked.

Right clicking, then selecting 'open in new tab' does work as expected.

Behaviour replicated in FF and Chrome on Ubuntu 14.04.

React 0.11.0 incompatibility: Warning: Invalid child context `router` supplied to `Locations`, expected a React component.

Issues using Locations hash

I'm trying to use hash routing described here.

So my app looks similar to this:

<Locations hash>
  <Location path="/" handler={MainPage} />
  <Location path="/other" handler={OtherPage} />
</Locations>

And to describe a Link:

<Link href="/">Home</Link>
<Link href="#other">Other</Link>

When I click on a link it successfully updates the url but it does not render the page described in the handler. Oddly enough when I refresh the page the correct component has been rendered. It feels like something isn't being triggered to update the view on click but it knows exactly where to go when I refresh.

More weirdness

Before I found out using hash was an option I was just describing the paths in with a # symbol.

<Locations>
  <Location path="/" handler={MainPage} />
  <Location path="#other" handler={OtherPage} />
</Locations>

In this case navigation worked fine once the app was loaded (clicking links rendered the correct pages). Once I hit refresh though it renders the MainPage every time, even though the window location is clearly <host>/#other.

Halp!

Server rendering and the path prop

One issue i'm running into while using server rendering is that the "path" prop i'll pass in for the root Locations component:

  <Locations  path={this.props.path}>
      <Location path="/" handler={MainPage} />
      <Location path="/todos/:todoListID" model={this.props.model} handler={TodoListPage} />
      <NotFound handler={NotFoundPage} />
  </Locations>

won't update as a user navigates to other locations (using the Link component provided by the library.) This causes issues with the application where something that triggers a full update from the root will render with the old path prop from the original full page server response. Do I need to force a React.renderComponent() on every page navigation to update the path prop at the root <Locations> component or am I grossly misunderstanding/misusing this?

Isomorphic (client + server side) end to end example?

Hi there,

I am having some trouble using react-router-component with an isomorphic application. Any chance you can provide an end to end example using express/node?

Specifically, I am having trouble with routing client side. Things seem to break strangely on second or third page link/load. I am probably doing something obviously wrong.

Thanks!

Needed synchronous version

I know, that you have developed an async version of react, but is it possible to make another branch of your router using only native react distributive with sync render method?

In some projects we are not allowed to use third-party components which use their own core implementation.

We solve "async issue" by getting all initial data on a server with an async method and then only pass to render in a callback.

RouteRenderingMixin causing React lib to throw

Upgraded to 0.18.0 from 0.15.2 and now get the following trace

Users/nijor22/WebstormProjects/Reaxer/node_modules/react/lib/cloneWithProps.js:41
      !child.props.ref,
            ^
TypeError: Cannot read property 'props' of undefined
    at cloneWithProps (/Users/nijor22/WebstormProjects/Reaxer/node_modules/react/lib/cloneWithProps.js:41:13)
    at RouteRenderingMixin.renderRouteHandler (/Users/nijor22/WebstormProjects/Reaxer/node_modules/react-router-component/lib/RouteRenderingMixin.js:12:12)
    at boundMethod [as renderRouteHandler] (/Users/nijor22/WebstormProjects/Reaxer/node_modules/react/lib/ReactCompositeComponent.js:1434:21)
    at React.createClass.render (/Users/nijor22/WebstormProjects/Reaxer/node_modules/react-router-component/lib/Router.js:32:26)
    at ReactCompositeComponentMixin._renderValidatedComponent (/Users/nijor22/WebstormProjects/Reaxer/node_modules/react/lib/ReactCompositeComponent.js:1394:34)
    at null._renderValidatedComponent (/Users/nijor22/WebstormProjects/Reaxer/node_modules/react/lib/ReactPerf.js:57:21)
    at ReactCompositeComponentMixin.mountComponent (/Users/nijor22/WebstormProjects/Reaxer/node_modules/react/lib/ReactCompositeComponent.js:947:14)
    at null.mountComponent (/Users/nijor22/WebstormProjects/Reaxer/node_modules/react/lib/ReactPerf.js:57:21)
    at ReactMultiChild.Mixin.mountChildren (/Users/nijor22/WebstormProjects/Reaxer/node_modules/react/lib/ReactMultiChild.js:202:42)
    at ReactDOMComponent.Mixin._createContentMarkup (/Users/nijor22/WebstormProjects/Reaxer/node_modules/react/lib/ReactDOMComponent.js:198:32)

Using navigate() without triggering a state change

Is there a supported way for using navigate similar to how it works in Backbone? (http://backbonejs.org/#Router-navigate) where you could pass in a replace:true option?

how to access state of router in other components?

hi, thanks for react-router-component. :)

question: is it possible to access the state of the router in other components, especially location handlers?

all the examples have different handlers for different locations, but i feel as though sometimes it doesn't always make sense to make a new component for different routes. a good example is a nav bar, which of course needs to know the state of the router, yet doesn't really need to be a completely different component for different states.

i imagine this is possible, but i couldn't find it in the source.

Cannot pass props to locations

Is it possible to pass props to the handlers of locations? I'd expect something like this to work:

<Location path="/" handler={HomePage} foo='bar' />

.navigate(href) is broken when called without a callback

In the documentation, it states that you can navigate programmatically using the .navigate method on a reference to the router component instance. Unfortunately, the source code requires a second argument to be passed in the form a function yet it doesn't state this anywhere. If you don't pass any additional arguments, the setPath method breaks as it expects a "navigation" argument to be an object:

Environment.prototype.navigate = function navigate(path, navigation, cb) {
  if (typeof navigation === 'function' && cb === undefined) {
    cb = navigation;
    navigation = {};
  }
  return this.setPath(path, navigation, cb);
}

Environment.prototype.setPath = function(path, navigation, cb) {
  if (!navigation.isPopState) {
    if (navigation.replace) {
      this.replaceState(path, navigation);
    } else {
      this.pushState(path, navigation);
    }
  }
  this.path = path;
  this.notify(navigation, cb);
}

Error setting contextual locations could cause infinite loop

If you don't set contextual on a contextual route it could cause the browser to redirect indefinitely. I accidently did this in Chrome and the only way to stop it was to kill the tabs process.

MainPage

<Locations hash>
  <Location path="/" handler={MainPage} />
  <Location path="/users/*" handler={UserPage} />
</Locations>

UserPage

<Locations>
  <Location path="/" handler={UserListPage} />
  <Location path="/:username" handler={UserPage} />
</Locations>

Deletes bundle on make

I execute make on the Makefile in the master-detail example but it is deleted right away. How can I generate the bundle and run your examples?

When using a global link you cannot use hash urls

We are currently using react-routes for a widget where we can only use hash-urls but the default router is not configurable so when we make a global link it asks for the default router and if the browser supports pushstate it returns the history browser, there is no way to configure this now.. Maybe make the default router configurable?

Better route matching support

I am missing a piece of functionality regarding query parameters. I would that whenever the route changes it's query parameters, those are passed as properties as well to the component handler of the route. For example:

<Locations>
    <Location path="/users/:userId/posts" handler="PostsPage" />
</Locations>

So when navigating to "/users/123/posts?sort=name&page=2" would be generated with:

<PostsPage userId="123" queryParams={ {sort: "name", page: "2"} } />

Right now the route matching is not as powerful as it could be.

When query parameters differ, the route doesn't match (related to #38).
Using * at the end is not a great alternative as it could match nested paths.
Using a regular expression makes us lose the very much convenient userId property in the child component.

So far, my best experience with javascript routers has been the backbone router together with backbone-query-parameters plugin (tried a few more like director not very well maintained and with quite a few problems).

Right now I am trying to re-implement the behavior mentioned based on the Backbone implementation. Does this look interesting and reasonable to you? Feedback is very much appreciated.

Host on cdnjs

It would be awesome if this could be hosted on cdnjs

navigation.replace should default to true if path is current path

Currently, using replaceState is always opt-in (i.e. it defaults to false):

  if (!navigation.isPopState) {
    if (navigation.replace) {
      this.replaceState(path, navigation);
    } else {
      this.pushState(path, navigation);
    }
  }

I think we should change this so that it defaults to true if the paths are the same. In other words, something like this:

var replace = navigation.replace == null ? normalize(path) === normalize(this.getPath()) : navigation.replace;

(The == is used intentionally here so as to also catch undefined.)

Remove match() calls from RoutingEnvironmentMixin or simplify match

I'd love to find a way to get these out of there. Ideally, you should be able to create a custom router like this:

React.createClass({
  mixins: [RoutingEnvironmentMixin],
  render: function() {
    if (this.getPath() === '/whatever') {
      return MyComponent();
    }
    return SomeOtherComponent();
  }
});

or to compose two (controlled) routers like this:

React.createClass({
  mixins: [RoutingEnvironmentMixin],
  render: function() {
    return div(null,
      SubRouterOne({path: this.getPath()}),
      SubRouterTwo({path: this.getOtherPath()})
    );
  }
});

(Currently, neither of these will work because match() must be implemented.)

In other words, RoutingEnvironmentMixin gets you the path and custom routers can decide what to do with it.

The current impediments to this are getPrefix, getPath, and the onBeforeNavigation handler (the latter of which adds the match to the navigation object so that navigations that can't be handled can be cancelled, e.g. by CaptureClicks).

Honestly, I'm not sure if it's going to be possible to get rid of the match calls; it's not an unrealistic requirement that routers be capable of telling you whether they can route a provided path. If that's the case, we should probably consider what the minimal requirements of that interface are (e.g. must it expose route, unmatchedPath, etc.? Do they always make sense?) and solidify that.

Animated transitions possible with back/forward buttons?

Hello,

The router component has been a great help to me, but I've run into an issue that I'm not sure can be solved.

I have transitions between locations using the AnimatedLocations component, and they work great when clicking a link made with the Link component.

However, I'd also like the transitions to occur when the user uses the back/forward buttons.

Is this possible, perhaps (though I've tried and failed) by overriding the popstate or hashchange methods to manually load a location using react-router-component?

Thanks so much for your hard work on a great tool.

When project is not at root of server, can't route to it

For development, I'm hosting a project on my development machine in a subdirectory: /var/www/wwb2 and I get to it via http://localhost/wwb2/

I can't seem to write a route to capture this. I've got a router:

var Content = React.createClass({                                                
render: function(){
    return (                                                                             
        ReactRouter.Locations(                                                           
            ReactRouter.Location({path: "localhost/wwb2", handler: SeedList}),           
            ReactRouter.Location({path: "localhost/wwb2/", handler: SeedList}),          
            ReactRouter.Location({path: "http://localhost/wwb2", handler: SeedList}),    
            ReactRouter.Location({path: "wwb2", handler: SeedList}),                     
            ReactRouter.Location({path: "wwb2/", handler: SeedList}),                    
            ReactRouter.Location({path: "/wwb2/", handler: SeedList}),                   
            ReactRouter.Location({path: "/wwb2", handler: SeedList}),                    
            ReactRouter.Location({path: "/", handler: SeedList}),            
            NotFound({handler: NotFoundPage})                                            
        )                                                                                
    )                                                                                    
}                                                                                          
});

My SeedList class just returns

SeedList

for debugging. My NotFoundPage class prints window.location to the console and also to the page in a div.

I can't get anything to route to SeedList. The NotFoundPage handler is invoked no matter what I try.

Contextual router not possible without requiring trailing slash

Consider the route:

/search(/:queryString)(/*)

You want to handle paths like this:

/search                   # goes to SearchPage
/search/:queryString      # goes to SearchPage
/search/:queryString/:id  # goes to SearchPage's child router

This translates, to the best of my abilities, to:

// In top-level router
<Locations>
  <Location path="/search(/:queryString)(/*)" handler={SearchPage}/>
</Location>

// In SearchPage
<Locations contextual>
  <Location path='(/)' handler={Result}/>
</Locations>

This will match /search/ (trailing slash) and /search/blah and /search/blah/123, but not /search. The latter will trigger the check contextual router has nothing to match on: null.

The routing pattern mechanism expects every route that leads to a contextual router to have an "unmatched part". The slash must be optional, but it isn't.

I think the logical solution is to assume that the lack of an "unmatched part" is the same as "/". Logically, if you have a parent router /search, then the child router's (/) should match an empty string.

How to specify header elements from within a handler component?

Can anyone recommend a way to specify header elements, like <title> and meta description, from within route handlers, for use in server-side rendering?

Async loading page

Possible to support async loading of component pages rather than download all component on first time viewing a page ?

Invariant Violation: App.render(): A valid ReactComponent must be returned.

I'm using the latest versions of this library and React on an app that renders on both server and client.

The server-side rendering executes fine, but when the client loads, I'm getting this error:

As expected, I'm returning the component generated by Locations(null, ...), which I'm logging before return so that you can see it's there. Can anyone point me in the right direction to debug something like this?

Regex in path?

Hello,

Can I use a regex in the path attribute of Location?

Copy Paste error in RouterMixin

I guess there might be little error in https://github.com/andreypopp/react-router-component/blob/master/lib/RouterMixin.js#L151-L152

@param {String} path is present twice :

  /**
   * Set new path.
   *
   * This function is called by environment.
   *
   * @private
   *
   * @param {String} path
   * @param {String} path
   * @param {Callback} cb
   */

Transition support

Do you have any plan to support page transition using ReactCSSTranstionGroup?

<Locations transitionName="xxx"></Locations>

It is like your example.
https://github.com/andreypopp/react-router-page-transition.

thank you for nice component and example!

How do I navigate without using Link or a href

I am looking for a way to navigate to a new route without using a Link component or plain a href tag, but instead in an onClickHandler. How should I do this so that if a route is matched it will be triggered else a server request is made?

'undefined' is not an object (evaluating 'navigation.isPopState')

I just upgraded from v0.6.0 to v0.11.0, and when calling navigate('/'), I'm getting the following error:

TypeError: 'undefined' is not an object (evaluating 'navigation.isPopState')

The stack trace points to this code, the error is thrown by the 2nd line:

Environment.prototype.setPath = function(path, navigation, cb) {
            if (!navigation.isPopState) {
                if (navigation.replace) {
                    this.replaceState(path, navigation);
                } else {
                    this.pushState(path, navigation);
                }
            }
            this.path = path;
            this.notify(navigation, cb);
        }

and it's called from the navigate() function in RouterMixin:

navigate: function(path, navigation, cb) {
                if (typeof navigation === 'function' && cb === undefined) {
                    cb = navigation;
                    navigation = {};
                }
                path = join(this.state.prefix, path);
                this.props.environment.setPath(path, navigation, cb);
            }

I'm receiving this error in a PhoneGap application, running the same app in a browser doesn't throw the error... v0.60 was previously working in the PhoneGap app.

Make popstate behave

It appears that react-router-component listens to onpopstate() and triggers itself, causing a conflict with my current setup.

When clicking a navigation element in my application, the path store gets updated and through a change-listener my router triggers a re-render. If I hit the back button, I'd like to update the path store with window.location.pathname, and through a change-listener trigger a re-render on my router.

How can I make react-router-component stop triggering on onpopstate() events?

edit: I want to make this work:

function componentDidMount() {
  // update the state with the new url when the store updates
  pathStore.on('update', updateUrl.bind(this));
  // listen to changes to 'pop state' and update the store accordingly
  window.onpopstate = function() {
    dispatcher.dispatch('path_update', window.location.pathname);
  };
}

Router callback contextual router

The callbacks onBeforeNavigation and onNavigation do not get fired on contextual routers while the router does wait for async components.. This makes it very hard to wait for a nested route. Any suggestions?

Attributes won't get transfered to children

If I do a

<Pages path={this.props.path}> <Page path="/:key" handler={DataPlaceholder} /> </Pages>

var DataPlaceholder = React.createClass({ render: function() { return ( <div> <h1>{this.props.key}</h1> </div> ); } });

the h1 remains empty. Any idea?
<Page foo="bar" ... /> doesn't work either.

Browserifying on case-sensitive systems fails

Browserifying my code with react-router-component works great on OS X, but on the build servers (which run Linux) I get this error:

>> Error: module "./Environment" not found from "/home/bamboo-agent-home4/xml-data/app-main/web/node_modules/react-router-component/lib/Link.js"

It seems since 0.15.1, the refactoring of lib/Environment.js into separate scripts under lib/environment causes the include to fail. For it to work on case-sensitive systems (like Linux), the require statement should be like this:

var Environment       = require('./environment');

getInitialStateAsync fires any time component receives new props

I'm not sure if this is by design, but I see getInitialStateAsync firing whenever component receives new props.

I'm not sure if this is the right/desired behavior. In my getInitialStateAsync I fetch remote data and update my root model (passed via props). This triggers render() on the root component. And so getInitialStateAsync fires again, ad infinitum.

Perhaps this is a bad/unsupported use case for getInitialStateAsync because the component doesn't own this state anyway and I pass {} to callback. But the idea of preparing a component is useful even if async “state” does not go to this.state but means preparing some model in props.

Maybe I should write my own mixin to do this. Still, is it a bug or not? Should receiving new props always trigger getInitialState?

Call stack:

Expose a way to know if async state is being prefetched in AsyncRouteRenderingMixin

I'm not sure if I'm getting it right but right now I don't see any indication of async state being prefetched inside AsyncRouteRenderingMixin. Only when the child is ready, prefetchAsyncState callback fires and calls replaceState.

I think it would be handy to have a way to know if an async child is being prepared at the moment. It's good to give user an indication that something is happening, and most async apps slightly dim the “outdated” view until it's replaced with new data, like Google does when you switch search pages.

Unfortunately I don't feel confident to suggest a solution yet: prefetchAsyncState is called from shouldComponentUpdate, but we can't just call setState from inside shouldComponentUpdate. Moreover, setting state would have no effect anyway since we're returning false from shouldComponentUpdate.

Disabling async prefetching

How do I go about disabling prefetch of async components? Typically my async components show some kind of a spinner, along with other contextual elements when state is being fetched.

Ever since I integrated in this router, this no longer happens, and it looks like the state is being prefetched in AsyncRouteRenderingMixin.

Can this be disabled using a prop?

Currently I'm monkey patching this:
var AsyncRouteRenderingMixin = require('react-router-component/lib/AsyncRouteRenderingMixin');
function AsyncRouteRenderingMixin_setRoutingState(state,cb) {
this.replaceState(state, cb);
}
if (AsyncRouteRenderingMixin.setRoutingState != AsyncRouteRenderingMixin_setRoutingState) {
AsyncRouteRenderingMixin.setRoutingState = AsyncRouteRenderingMixin_setRoutingState;
}

Non-npm build

Unfortunately, anybody who wants to use this has to have their project built using browserify (or the like).

It would be very useful to have a stand-alone build of this (meant to be included after react.js) distributed in the repo. Adding in a bower.json wouldn't hurt either.

React Router component needs a maintainer

Hello,

I'm not sure this library is still relevant in light of the new and awesome react-router but if someone still finds it useful then it needs a new maintainer! There some good PRs to be merged and some issues to be fixed. Also 1.x branch contains unfinished refactoring which should make rrc more modular and less error-prone.

onBlur Support for Property tags

I have a Property code like this -

Somehow my onBlurHandler is not firing. Is there support for onBlur handler on property tags?

<Link> onClick handler not firing

I'm having some issues getting this working. Seems the Link component isn't handling onClick and therefore the router loses control of in-app routing. Here's the setup I'm using:

/** @jsx React.DOM */

var Router = require('react-router-component')
  , Location = Router.Location
  , Locations = Router.Locations
  , NotFound = Router.NotFound
  , Link = Router.Link;

var domReady = require('imports?win=>window!./domready');

var Index = React.createClass({

    render: function() {

        return (
            <div>
                Hello, this is main page of the application!
                Proceed to my <Link href="/page">page</Link>.
            </div>
        );
    }

});

var Page = React.createClass({

    render: function() {

        return <div><h1>Page!!!</h1></div>;
    }

});

var Main = React.createClass({

    notFound: function() {
        return <h1>Not Found, Yo!</h1>;
    },

    render: function() {

        return (
            <Locations>
                <Location path="/" handler={Index} />
                <Location path="/page" handler={Page} />
                <NotFound handler={this.notFound} />
            </Locations>
        );
    }

});

domReady(function() {
    React.renderComponent(Main(), document.querySelector('#container'));
});

React is a global when I package this with Webpack. If I instead return an anchor in the render method for the Main component with an onClick handler that calls preventDefault things block as expected.

I've looked through the codebase a bit and can't for the life of me determine why this pared down example fails.

How to process routes with optional parameters ?

How to process routes like this:
/step1/:search_path/:urn(/:agent)(?marker=:marker)

Where agent and marker is optional.

Router taking param into account in the ID

Hi,

I have user profile page with such a Location :
<Location path="/people/:id" handler={PersonDetail} />

There are different tabs in this page. When clicking these tabs, I change the url using this.navigate with "/people/37062?tab=emails" as an argument, and here come my problems.

Somehow then the id sent to my component props is not just 37062 anymore but 37062?tab=emails

I just have updated to 0.18.0, is this a bug or something I am missing ?

Issues with navigating across "top level" routes in contextual router

This issue can be repro'd as follows:

Create the 'top level router' component :

<Locations path={this.props.path} >
    <Location path="/test/*" handler={testContextRouter} />
    <Location path="/testothercontext/*" handler={testOtherContextRouter} />
</Locations>

'testContextRouter'

 <Locations contextual>
      <Location path="/" handler={function(props) { return React.DOM.div(null, 'test/ROOT') }} />
      <Location path="/:slug" handler={function(props) { return React.DOM.div(null, 'test/' + props.slug) }} />
</Locations>

'testOtherContextRouter'

 <Locations contextual>
      <Location path="/" handler={function(props) { return React.DOM.div(null, 'testothercontext/ROOT') }} />
      <Location path="/:slug" handler={function(props) { return React.DOM.div(null, 'testothercontext/' + props.slug) }} />
</Locations>

Now when navigating from, say /test/etc to /testothercontext/etc2 you'll find that the url seems to update without actually activating any handlers (after the initial route transition between them works)

Edit: Thinking through it some more; the navigation from /test/etc to /testothercontext/etc2 is being done by Link components rendered at the same level as the 'top level' router. Can the issue have something to do with that?

When no routes are defined, <Link> still uses routing

We have an application where we use <Link> extensively. We embed fragments of this app in external custom sites, using scripts or iframes. In that case, the fragment will use <Link>, but there will be no router, since the whole app isn't running; we don't control the page itself, so we can't install any routing, use pushState() etc.

Unfortunately, it looks like <Link> will always involve the routing machinery, even if there is no connection between the environment and a router. I could install a custom environment that simply set window.location, but that seems like an awkward solution for something that should be simple: When there is no routing going on, <Link> should simply behave like <a>.

strml / react-router-component Goto Github PK

react-router-component's Introduction

React Router Component

Project Overview

Installation

Docs

react-router-component's People

Contributors

Stargazers

Watchers

Forkers

react-router-component's Issues

More weirdness

Recommend Projects

Recommend Topics

Recommend Org