altjs / router Goto Github PK

altrouter has no commonjs export had to modify it in nodemodules. to use it. hope there would be umd build so that using it would not be tied to those using babel

The following works:

import React from "react"
import {render} from "react-dom"
import createBrowserHistory from "history/lib/createBrowserHistory"
import AltRouter from "alt-router"
import alt from "./alt"
import routes from "./routes"

// TODO: Look into why routes has to be a function that returns itself
var getRoutes = () => routes

render((
  <AltRouter flux={alt} history={createBrowserHistory()} routes={getRoutes} />
), document.getElementById("root"))

However if I pass in routes directly (as from the README) it errors with:

Uncaught TypeError: props.routes is not a function
  AltRouter @   AltRouter.js?5a0a:108

Seems like there are a number of incompatibilities -- is development on alt ongoing?

Not sure what else to try. I spent a decent amount of time seeing if I could debug on my side, but no luck.
Getting an invariant violation and some warning(s). See image below. I've also pasted my router.jsx and dependencies. I have another repo/project that uses almost identical code with slightly older versions and works fine. Any ideas?

My dependencies:

"alt": "^0.17.8",
"alt-router": "^1.2.0",
"history": "^1.13.0",
"react": "^0.14.2",
"react-dom": "^0.14.2",
"react-router": "^0.13.5",
"react-tap-event-plugin": "^0.2.1"

Here's where AltRouter is used:

import React from 'react';
import { Router, Route, IndexRoute } from 'react-router';
import AltRouter from 'alt-router';
import alt from './libs/alt';
import createBrowserHistory from 'history/lib/createBrowserHistory';

import App from './components/app/App.jsx';

const history = createBrowserHistory();

const routes = (
  <Route path="/" component={App}>
  </Route>
)

export default class AppRouter extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <AltRouter flux={alt} history={history} routes={routes} />
    );
  }
}

export default AppRouter;

Right now alt router seems to have problem with react-router 2.0 and history 2.0.

It would be great to be able to make them work together.

Thanks !

Hi,

I tried to make it work following the examples, but every time I load the page I get this :

Warning: Failed Context Types: Required context `flux` was not specified in `AltRouter`.
app.js:109 Uncaught TypeError: object is not a function

My code looks like this :

import AltRouter from 'alt-router';
import React from 'react';
import ReactDOM from 'react-dom';
import createBrowserHistory from 'history/lib/createBrowserHistory';
import { Route } from 'react-router';

import alt from './alt';

var App = require('./components/App.jsx');
var Offers = require('./components/Offers.jsx');
var Customers = require('./components/Customers.jsx');


const routes = (
  <Route path="/" component={App}>
    <Route path="customers" component={Customers} />
    <Route path="offers" component={Offers} />
  </Route>
);

ReactDOM.render((<AltRouter flux={alt} history={createBrowserHistory()} routes={routes} />), document.getElementById('app'));

and alt.js :

const Alt = require('alt');
const alt = new Alt();

module.exports = alt;

Any ideas ?

Thanks !

Now I have to install all libraries by myself. Is there any reason why you didn't add them as dependencies?

Thanks

https://github.com/altjs/router/blob/v1.2.0/src/AltRouter.js#L105

cf remix-run/react-router#2502

This history.listen listens to the "raw" history, and fires when the user initiates a transaction, and fires with the new location.

I behaves quite differently from calling history.listen on the wrapped history that the RoutingContext exports on context - that one invokes the callback with router errors and router state (params, routes, &c.), and in the case of async routes only fires after the transition fully completes (i.e. potentially after the callback set up above fires).

Not sure if this is intentional - seems odd at first glance.

I have a string passed through the URL that I need to capture as a query param.

C6wPKapKZrx6EEk5R5UELC8KaBSUQEdNbAP1PSvwwME%3D

The query param captured by the router is however;
C6wPKapKZrx6EEk5R5UELC8KaBSUQEdNbAP1PSvwwME=

Is there some way to prevent Alt Routers from parsing and escaping the query parameter?

Hello, just wondering why Route wasn't exported from react-router? Upon first using AltRouter I was confused as to where Router was defined, was the idea to just keep this module as DRY and possible since Route isn't modified or was there some other purpose?

It looks like I can only listen to dispatches when I manually use alt.router.pushState or alt.router.replaceState. But I can't listen to overall routing activity, which would be much more useful. Is there a reason for nor exporting it?