router-link

Router Link React router

Made out of frustration with react-router, this router library is incredibly easy to use.

INSTALLATION

npm i router-link or yarn add router-link

USAGE

An example application can be found here: React App Boilerplate with Mobx

// Define your routes in a file called routes.js
import Home from '@/views/Home.js'
import About from '@/views/About.js'
import Login from '@/views/Login.js'
import Chat from '@/views/Chat.js'
import NotFound from '@/views/NotFound.js'
 
const routes = [
  { path: '/', view: Home },
  { path: '/about', view: About },
  { path: '/login', view: Login },
  { path: '/chat', view: Chat },
  { path: '*', view: NotFound }
]
 
export default routes
 
 
// In your App.js, the top level component
import React, { Component } from 'react'
import { Router } from '@/router-link'
import Navigation from '@/components/Navigation.js'
import routes from './routes.js'
import './App.css'
 
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <Navigation/>
        </header>
        <main className="App-main">
          <Router routes={ routes }/>
        </main>
      </div>
    )
  }
}
 
export default App
 
 
// Use the Link to create links for navigation
// They will create a-tags with an active class for styling.
import React, { Component } from 'react'
import { Link } from '@/router-link'
import { store } from '@/store.js'
 
class Home extends Component {
  render() {
    return (
      <Link to="/login">Log in</Link> to get started!
    )
  }
}
 
export default Home

NAVIGATION

In your components you can use the router.push('/path') to programmatically trigger a route:

// Import the router library
import { router } from 'router-link'
 
// Do this anywhere inside your component to redirect
router.push('/login')

DYNAMIC ROUTES

Define dynamic routes by adding a : in front of the sub-path, and get the parameters as props:

// Define route with parameters
const routes = [
  { path: '/messages/:id', view: Messages }
]
 
// Use like this
<Link to={ `/messages/${ message.id }` }>Message</Link>

In this case the the id will be available as this.props.route.id in your component.

LICENSE

MIT Licensed. Enjoy!