tj / react-enroute

React router with a small footprint for modern browsers

I'm the founder and solo developer of Apex Software. I've written hundreds of open-source projects for the JavaScript and Go communities, and I'd like to thank these companies for sponsoring my open-source work:

Become a sponsor	Become a sponsor

And thank you to the individuals who sponsor my work:

You can find me here:

Twitter • Instagram • Blog • Slack

react-enroute's Issues

No "indexRoute" equivalent

Should it exist in react-enroute? I think it should as it's quite cheap to implement, and makes components easier to write (saves use of React.Children.count):

// without indexRoute
class Index extends Component {
  render() {
    const { children } = this.props
    if (React.Children.count(children) > 0) {
      return <div><Menu /><p>Please select a category</p></div>
    } else {
      return <div><Menu />{ children }</div>
    }
  }
}

ReactDOM.render(<Router {...state}>
  <Route path="/" component={Index} />
  …
</Router>, document.querySelector('#app'))


// with indexRoute
class Index extends Component {
  render() {
    const { children } = this.props
    return <div><Menu />{ children }</div>
  }
}

class IndexHome extends Component {
  render() {
    return <p>Please select a category</p>
  }
}

ReactDOM.render(<Router {...state}>
  <Route path="/" component={Index} />
  <IndexRoute path="/" component={IndexHome} />
  …
</Router>, document.querySelector('#app'))

What do you think?

Possibly using the router-component package name?

Hey @tj. Sorry this issue is unrelated but this was the only way I saw to get in contact with you!

My name is Mark and I was working on a router package and was wondering if you would be willing to let me use the router-component npm package name?. It looks like you've created it over 5 years ago and looks like it hasn't been used. Will you be willing to allow me to use it for my project? I would be extremely grateful!

Thanks for your help!

Is this a SPA Router

SPA Router or nah?

Passing extra route props to component?

Sometimes it's really useful. For example setting screen title in react-native:

<Router>
  <Route ... title="Users" />
</Router>

Or certain configuration of component:

<Router>
  <Route ... component={List} items={users} />
</Router>

middleware?

before and after render callback?

New props in Router will not re-render children with new props.

the closure of props from this function https://github.com/tj/react-enroute/blob/master/index.js#L45 seems to be causing issue and not passing new props to children on subsequent renders.

Something like below fixes the issue:

const render = (params, renderProps) => {
       const finalProps = { ...this.props, ...renderProps, location, params };
       const children = React.createElement(component, finalProps);
      return parent ? parent.render(params, { children }) : children;
}

Publish latest version?

I'm trying to use react-enroute on the server side but it seems that the npm version has this line:

localStorage.debug

and is throwing error. It seems to have been removed. Is there a plan to publish latest version to npm?

Add React 16 to peerDependencies

To prevent warning while installing packages. Look like router works in react 16 without any problems.

Hooks?

Do you plan including hooks "a la react-router" or in some other form?

Any support for react native?

Asynchronous route components

This router looks excellent from a first, short glance.

One big feature I couldn't find were async components. This is imo quite important to allow for code splitting with webpack like this:

<Route
  path="/hello"
  getComponent{(callback) => {
    System.import('/helloModule.jsx')
      .then((hello) => callback(null, hello));
  }} 
/>

Or the old, webpack v1 way:

<Route
  path="/hello"
  getComponent{(callback) => {
    require.ensure([], (require) => {
      callback(null, require('./helloModule.jsx'));
    });
  }} 
/>

Any plans to implement that?