react-smart-router

npm install --save react-smart-router

or

yarn add react-smart-router

Usage

Router is two types: StaticRouter and DynamicRouter.

StaticRouter is used for server side rendering. DynamicRouter is used for client side rendering and location updates.

All routes must be wrapped in Router

  
  import React, {Component} from 'react';
  import {getRouter, Route, WithRouter} from 'react-smart-router';
 
  import Home from './components/home';
  import About from './components/about';
  import Post from './components/post';
  import CheckRoute from './components/checkroute';
 
  const Router = getRouter(); //getRouter function returns Static or Dynamic router, depends on rendering side.
 
  export default class IndexComponent extends Component {
      
      constructor(){
          super(...arguments);
      } 
 
      render(){
          /*
          Static router must have context and location props.
 
          Both router props (context and location) is ignored in dynamic router,
          because it automatically get location path and context from history module.
          So location prop (this.props.path) can be undefined or null in client side.
 
          Location prop in server side is initially rendering path and can't be undefined, null or another falsy value.
          
          Router can accept only single child.
 
          */
 
          return <Router context={{}} location={this.props.path}>
              <div id="Container">
 
                  <nav>
                      <ul>
                          <li>
                              <Link to="/" title="home page">Home</Link>
                          </li>
                          <li>
                              <Link to="about" title="about page">About</Link>
                          </li>
                      </ul>
                  </nav>
                  
                  <WithRouter>
                    <CheckRoute />
                  </WithRouter>
 
                  <Route
                      path="/"
                      props={this.props}
                      component={Home}
                  />
 
                  <Route 
                      path="/about"
                      props={this.props}
                      handelRefName="aboutRef"
                      component={About}
                  />
 
                  <Route
                      path="/post/:post_id"
                      props={this.props}
                      component={Post}
                  />
              </div>
          </Router>
 
      }
 
  }

Link

Link component renders simple a tag, which dynamically controls page location (router). If javascript is disabled, Link component works as simple link (uses static server rendering)

to - path to navigate (required) title - a tag title attribute (required) children - children or childrens to render inside a tag (required)

Route

Route object render component depend on current pathname.

path - detectable pathname. If current document location path is match path prop, route renders component passed as component prop. Path format can be as express.js path formats (required) component - component to render if path is matched current document location path (required) props - additional props will be passed to child component. handleRefName - handler (function) name which handles Route child component instance and bind beforeRouteLeave hook to it. Default is 'passPageRef'.

Rendering component and route matching

If Route component (with path prop) matched current location props 'component' is rendering inside it.

Route object passes 'match' object in props to child component, which contains following props

direct - boolean value. If route is rendered from server, value is true, if client side - false. pathname - matched pathname (usually current location pathname). params - pathname params. search - search query in url.

Also Route object passes passPageRef prop as function (if default is not changed with 'handleRefName' prop in Route).

beforeRouteLeave hook

If you want to before route leave hook in child component, you must pass reference to route object

 
  //component as Route component
  class HomePage extends React.Component {
    
      constructor(){
          super(...arguments);
          this.props.passPageRef(this);
      }
 
      beforeRouteLeave(currentState, nextState, next){
          if(!nextState.matching) return next();
 
          //do anything
          next(); //call when you are ready to change route
      }
 
      render(){
          return <div>Home Page</div>
      }
  }

beforeRouteLeave hook arguments

currentState - contains same object as match. See above. nextState - contains same object as currentState or match, but it has additional property matching, which shows that next document location is matching this route or not. So before you use any of nextState property, you must check if next location is matching with matching prop.

WithRouter

WithRouter component is used to update any child element when route is changed. WithRouter component can only has single child component, which receives following props direct, pathname, search

Author

Edvinas pranka

https://www.ceonnel.lt

License

The MIT License (MIT)

Copyright (c) 2017 Edvinas Pranka

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.