Move router into scalajs-react about scalajs-react HOT 27 CLOSED

+1 looking forward to this

from scalajs-react.

@chandu0101 @ramnivas @rbraley

I've added a preliminary version of the router to the v0.7.x branch. See usage demo here.

I'll revise the names of types, add some documentation but that's the jist of it. This is what I am using in my main work project and I don't need any other features. For my needs, it's perfect and better than everything else I evaluated. You'll notice:

• Links to routes are type-safe, can't go stale.
• An invalid route automatically changes the URL and route to the root route. (Trivial to add a not-found route if needed.)

from scalajs-react.

wow ,now its exercise time for my little brain , thanks a lot mate .

from scalajs-react.

Also I forgot to mention that this also keeps the page & URL in sync. i.e. URL changes, so does the route. Click on a link to change the route, the URL updates automatically too.

If there any other features anyone needs, please let me know.

@chandu0101 Hehe np mate. My advise is start with step 1) how to use it, then later step 2) how it works. :)

from scalajs-react.

can we get something like

    <RouteHandler />

from https://github.com/rackt/react-router ?

so that we don't need to copy header and footer for each page!

from scalajs-react.

I couldn't be bothered spending more time on react-router so I'm not going to look at the details. Sorry. But from your comment you want an easy way to wrap all of the routes to add a header and/or footer? Yeah ok, I can add that functionality.

(Note that for now, you can already wrap stuff just using normal functions. In the demo I added above, addBackButton is an example of how.)

from scalajs-react.

yeah i am currently using addBackButtonStyle

  def addPages(inner: Renderer[AppPage]): Renderer[AppPage] = router => {
      header(router),
      inner(router),
      footer()
  }

its not that important future its just make things easier , yeah may be in future , thanks mate 👍

from scalajs-react.

Yes, thanks for letting me know. I imagine this would be annoying with 20 routes. :) I'll add this feature before releasing.

from scalajs-react.

I've added more functionality to the Router.

• Redirection routes.
• Not-found/catch-all action.
• Dynamic page routes (eg. "/blah/person/123").
• Dynamic route translation (eg. remove trailing slashes from urls, redirect and try again)
• Render interception. Use case: Add headers, footers, back buttons etc. (@chandu0101 this is for you)

Example here.

Also, does anyone have ideas on the name of the Page class? You would normally go object MyPage extends Page and then use the DSL within to build up your routing rules / route set.

from scalajs-react.

great mate , thanks for all hard work you putting on this project. a big shout out to you 👍

Happy Coding!

from scalajs-react.

how to use this new router mate ?

I tried this way

  val C = AppPage.router(BaseUrl("/appname"))
React.render(AppRouter.C() ,dom.document.body)

its not working ,when i click on new route link it just staying on home page !

from scalajs-react.

The router now needs to know the full base url (including http://). It doesn't need to be known at compile time, just at runtime.

So instead of BaseUrl("/appname") try BaseUrl.fromWindow / "appname".

from scalajs-react.

got it ,thanks :)

from scalajs-react.

No worries mate :)

from scalajs-react.

@chandu0101 I added an elidable warning for the problem you had seeing as its such an easy problem to have and not so easy to detect. (b2916fc) Please let me know if you come across other similar situations that I can make friendlier.

from scalajs-react.

sure mate :)

from scalajs-react.

@japgolly mate , I am confused with this new router
i have my app running at http://chandu0101.github.io/scalajs-react-template
now i manually added /hello in window location and pressed enter
i am expecting it should take me to hello route or atleast redirect to notfound configured page , but i am getting 404 NOT FOUND ?
in previous router if i change hash of window location from my app it worked perfect.

from scalajs-react.

I think that's a limitation of Github pages in that http://chandu0101.github.io/scalajs-react-template/hello doesn't exist from the github server's point of view. You'd need to configure the server to ignore everything after the base url so that javascript can process it. This would be the same with other JS routers I believe.

As for the popstate event not being triggered when you manually add /hello to the url, it may be a browser limitation. MDN says "for the same document":

A popstate event is dispatched to the window every time the active history entry changes between two history entries for the same document

You can bypass both of these issues if you use # instead, so use #hello instead of /hello. Most servers and browsers treat # and what follows it like parameters to the same page.

from scalajs-react.

thanks for explanation mate , # indeed solved all issues . btw is book marking supported ? if i open myappurl#hello in different tab/browser i am redirecting to home page.

from scalajs-react.

Glad to hear! Yes bookmarking is supported, opening the same url in a different tab should work. If it's not then it's a bug but I tested it manually and it worked plus I thought there was a unit test for it?...

from scalajs-react.

i tested both on my local server and on gh-pages (http://chandu0101.github.io/scalajs-react-template#hello) ,its redirecting to home page - looks like a bug !

from scalajs-react.

Just tested mine, it works as expected. I gave your site a try, there seems to be something wrong in your setup cos when you hit reload the URL gains a slash then removes it. I'll add logging later today so you can see what it's doing and why.

from scalajs-react.

@chandu0101 Updated. Instead of MyPage.router(baseUrl) use MyPage.router(baseUrl, Router.consoleLogger) to get the router to log to the console. I can't see any problems but the router is nice and unit-testable so if there are any problems just add another test case to the router tests and let me know. (Also there was refactoring that will break against previous SNAPSHOT so check today's commit log.)

from scalajs-react.

First draft doc/tutorial added. This is done.

from scalajs-react.

excellent mate , bit by bit its going to be full SPA library! . When is v0.7.x is going to be released ?

from scalajs-react.

@japgolly mate ,after route transition finished scroll position not resetting to top!

   dom.window.scrollTo(0, 0)

should be included some where ?

from scalajs-react.

v0.7.x will be released within a week. :)

About scrollTo, do other routers do that on every route change? Also could you please open a new issue if you want to discuss that further? Cheers

from scalajs-react.