alnilam

⭐ 🌟 ⭐

What / Why is Alnilam?

It's a fork of react-router-dom in TypeScript. You can find the differences to RR 5.0 here.

Motivations:

• No more split between core library and dom. This makes the whole thing a lot easier to understand.
• No more react native support. A necessity of point one, but also motivated by the low download count of RR native.
• Streamlining: Removing MemoryRouter, HashRouter, BrowserRouter. Those just wrapped <Router>.
• Break things the original can't because it would require major releases:
  • Dropping exports
  • Upping the minimum react version.
  • Changing key behaviors (like Route)
• Port the entire thing to typescript.
• Break from some minor decisions made for RR.

Ultimately, it's more about the learning experience. It's my first dabble with a library, typescript and publishing something on NPM. Alnilam also serves as my testbed for contributions back to RR.

Acknowlegdements

Thanks to all original contributors of React-Router.

Getting started:

You can find the documenation here.

npm i alnilam

// Minimal example using the browser history API.
import { Router, Switch, Route } from "alnilam";
import { createBrowserHistory } from "verlauf";

const myHistory = createBrowserHistory(/* consult the history documentation for your options here*/);

function MyRouter() {
  return (
    /* Setting up the router itself. */
    <Router history={myHistory}>
      {/* Switch will only render the first matching route: */}
      <Switch>
        {/* Defining the individual routes: */}
        <Route path="/" exact >
          <div> Epsilon Orionis </div>
        </Route>
        <Route path="/alnitak" >
          <div> Zeta Orionis </div>
        </Route>
        <Route path="/mintaka" >
          <div> Delta Orionis </div>
        </Route>
        <Route path="/ran" >
          <div> Home of Bill. </div>
        </Route>
      </Switch>
    </Router>
  );
}

Here is a a small example app made with Alnilam. It shows:

• Nested routes
• Basic use of <Match>, <Route>, <Link>, and <Switch>
• Use of parameters in route declarations

TODO for 1.0

• Outline (or implement) API changes and refactorings for future work.
  • Document the API differences properly in a separate document.
• Figure out proper typing for withRouter()

Why is it called "Alnilam"?

Alnilam is a star that was used in celestial navigation. It's one of the stars in Orions belt - which happens to be my favorite constellation - and it's official designation is Epsilon Orionis. I'm also a fan of contrived package names ;-)