// 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, include your routes
// and pass them as the 'routes' prop to <Router>
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

// Import the router library
import { router } from 'router-link'

// Do this anywhere inside your component to redirect
router.push('/login')

// Define route with parameters
const routes = [
  { path: '/messages/:id', view: Messages }
]

// Use like this
<Link to={ `/messages/${ message.id }` }>Message</Link>