I'm trying to show users in my view, but i have this error Undefined variable: users
I don't know what is the problem, because in my controller for that view the user method is called.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
use App\Role;
use App\Http\Requests;
class pagesController extends Controller
{
public function viewIndex(){
$users = User::all();
return view('index', ['users' => $users]);
//return view('index');
}
}
And this is the route where my controller is called
Route::get('/index', [
'uses' => 'pagesController#getIndex',
'as' => 'admin',
'middleware' => 'roles',
'roles' => ['Admin']
]);
This is my blade file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Laravel Blog</title>
<!-- CHANGE THIS TITLE FOR EACH PAGE -->
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- Default Bootstrap Navbar -->
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
<li>Contact</li>
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#if (Auth::guest())
<li><a class="btn btn-default" href="{{ url('/login') }}">Login</a></li>
<li><a class="btn btn-default" href="{{ url('/register') }}">Register</a></li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
#foreach($users as $user)
#if($user->hasRole('Admin'))
<li>Edit users</li>
<li>
<a href="{{ url('/logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
#else
<li>Edit page</li>
<li>
<a href="{{ url('/logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
Logout
</a>
<form id="logout-form" action="{{ url('/logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
#endif
#endforeach
</ul>
</li>
#endif
</ul>
</div>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="jumbotron">
<h1>Welcome to My Blog!</h1>
<p class="lead">Thank you so much for visiting. This is my test website built with Laravel. Please read my popular post!</p>
</div>
</div>
</div>
</div>
<!-- end of .container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>
Any ideas?
I think you're pointing to wrong controller method in your routes.
Your route will be:
Route::get('/index', [
'uses' => 'pagesController#viewIndex',
'as' => 'admin',
'middleware' => 'roles',
'roles' => ['Admin']
]);
and your controller (pagesController) will go like this:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
use App\Role;
use App\Http\Requests;
class pagesController extends Controller
{
public function viewIndex(){
$users = User::all();
return view('index', compact('users'));
}
}
I think this will help to solve your problem.
Note: Please follow the naming conventions in your code so that it would be easy to understand and some frameworks (like laravel itself) runs on some followed conventions.
Thanks!
Related
m new to vue and after installing it in Laravel, I make a new component but its not showing in browser,and the browser gives warning in developers tools, in developers tools > console it shows:
app.js:37960 [Vue warn]: Failed to mount component:
template or render function not defined.
found in
---> <TaskForm>
<Root>
warn # app.js:37960
app.js:46384 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
is there any problem in code or if any solution to resolve this issue?
component:
<template>
<div class="col-md-8">
<div class="card card-default">
<div class="card-header">Task Form</div>
<div class="card-body">
<form action="./api/task" method="POST">
<div class="form-group">
<input type="text" name="title" placeholder="Task title" class="form-control">
</div>
<div class="form-group">
<input type="submit" value="Add Task" class="btn btn-info">
</div>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
app.js:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component',
require('./components/ExampleComponent.vue').default);
Vue.component("task-form", require('./components/TaskForm.vue'));
const app = new Vue({
el: '#app'
});
this is app.blade.php: app.blade.php:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light navbar-laravel">
<div class="container">
<a class="navbar-brand" href="{{ url('/') }}">
{{ config('app.name', 'Laravel') }}
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
#if (Route::has('register'))
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
#endif
#else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->name }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
#csrf
</form>
</div>
</li>
#endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
#yield('content')
</main>
</div>
</body>
</html>
I'm trying vueJS (+ laravel) and i'm encountering a problem.
I made an OrdersComponent.vue with a v-for (for each order which I retrieved from my API), but nothing happens
OrderComponent.vue : (h1 is rendering, and console.log(this.orders) is working)
<template>
<div>
<h1> Commandes </h1>
<div class="card card-body" v-for="order in orders" v-bind:key="order.idCommande">
<h2> {{ order.date }} </h2>
<span> {{ order.statut }} </span>
</div>
</div>
</template>
<script>
import Vue from 'vue'
export default Vue.extend({
data() {
return {
orders: [],
order: {
idCommande: '',
date: '',
prix: '',
statut: '',
},
orderId: '',
edit: false
}
},
methods: {
fetchOrders() {
fetch('api/orders')
.then(res => res.json())
.then(res => {
this.orders = res.data;
console.log(this.orders);
})
}
},
created() {
this.fetchOrders();
}
})
</script>
Page which call the component (orders.blade.php) :
#extends('layouts.app')
#section('content')
<orders></orders>
#endsection
finally, layouts.app file :
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<!-- Fonts -->
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet" type="text/css">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-expand-md navbar-light navbar-laravel">
<div class="container">
<a class="navbar-brand" href="{{ url('./') }}">
MyOnlineCV
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="{{ __('Toggle navigation') }}">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<!-- Left Side Of Navbar -->
<ul class="navbar-nav mr-auto">
</ul>
<!-- Right Side Of Navbar -->
<ul class="navbar-nav ml-auto">
<!-- Authentication Links -->
#guest
<li class="nav-item">
<a class="nav-link" href="{{ route('login') }}">{{ __('Login') }}</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('register') }}">{{ __('Register') }}</a>
</li>
#else
<li class="nav-item dropdown">
<a id="navbarDropdown" class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" v-pre>
{{ Auth::user()->username .' '. Auth::user()->email }} <span class="caret"></span>
</a>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="{{ route('commandes') }}"> Mes commandes </a>
<a class="dropdown-item" href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();">
{{ __('Logout') }}
</a>
<form id="logout-form" action="{{ url('/logout') }}" method="GET" style="display: none;">
#csrf
</form>
</div>
</li>
#endguest
</ul>
</div>
</div>
</nav>
<main class="py-4">
<div id="app">
<div class="container">
#yield('content')
</div>
</div>
</main>
</div>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
Maybe you have already fixed it but in my case I was using an arrow function in methods but it was not working this way. I had to change it to "normal" function declaration like so:
methods: {
fetchOrders: function() {
fetch('api/orders').then(res => res.json())
.then(res => {
this.orders = res.data;
console.log(this.orders);
});
}
},
Try to remove this from your component`s data() method:
...
order: {
idCommande: '',
date: '',
prix: '',
statut: '',
},
orderId: '',
...
You declare "order" in v-for section:
v-for="order in orders"
May be you forgot to recompile your app after making change.
Remove order object from data()
order:{
idCommande: '',
date: '',
prix: '',
statut: '',
}
and recompile the app using:
npm run dev
Moreover:
We create this kind of objects when we are going to submit some data using a form.
For example
For signup/register, we get user name, email, age, etc and save it into an object like below by calling each value in a template (e.g. user.name)
user:{
name:'',
email:'',
age: '',
}
and then we just send user object via axios or fetch to the server.
just want to ask a question, if I want to disable the sidebar menu page in my login page, how would I do that? In the first place, is it possible? If it is possible could you show me some example or even give me a link for me to reference to see how to do it. Because I still can access my data even without logging in through the sidebar so I want to disable it if possible. Thanks in advance
If you need me to show my code just ask, I will put it in asap.
app.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>#yield('title')</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<link href="{{ asset('css/title.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#include('layouts.testSidebar')
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}" style="color: white">
#yield('title')
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" style="background-color:blue">
<b style="color: white">{{ Auth::user()->name }}</b> <span class="caret"></span>
</a>
<ul class="dropdown-menu" style="background-color: blue">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();" style="background-color: blue">
<b style="color: white">Logout</b>
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
If u dont want to show the Left Side Of Navbar for the not logged in user try the below
#if(Auth::check())
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
#endif
I have already asked this question already(closed due to inactivity) and I have been trying many different methods to solve it but it still doesn't work. I even try removing all those related to vue inside laravel by following many different kind of website where they all told me to remove the vue dependency. (here is one of the link that I followed, https://mattstauffer.com/blog/removing-all-vue-dependencies-from-laravel/) I even replaced the app.js with a new one created from scratch since in the past I didn't do anything to it
Can somebody please help me, I am stuck in this problem for quite a long time already and I really don't know what to do. All I want is to solve this error "[Vue warn]: Error compiling template:" since it is affecting the navbar in my webpage
I am using laravel framework 5.5.7 and I didn't even update my laravel to get until this vue. And also I don't even recall installing vue into my laravel.
This is the error they given me:
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
- Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.
(found in <Root>)
app.blade.php
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
<div id="app">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<div class="navbar-header">
<!-- Collapsed Hamburger -->
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#app-navbar-collapse" aria-expanded="false">
<span class="sr-only">Toggle Navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<html>
<head>
<title>SideBar Menu</title>
<link href="{{ asset('css/style.css') }}" rel="stylesheet">
</head>
<body>
<div id="sidebar">
<ul>
<li>Summary</li>
<li>Deleted Records</li>
<li class="dropdown">
Edit User Information <span class="caret"></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Personal Information Edit</li>
<li>Driver License Class Edit</li>
</ul>
</li>
<li class="dropdown">
Evaluation <span class="caret"></span>
<ul class="dropdown-menu forAnimate" role="menu">
<li>Evaluation</li>
</ul>
</li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</body>
</html>
<!-- Branding Image -->
<a class="navbar-brand" href="{{ url('/') }}" style="color: white">
{{ config('app.name', 'Laravel') }}
</a>
</div>
<div class="collapse navbar-collapse" id="app-navbar-collapse">
<!-- Left Side Of Navbar -->
<ul class="nav navbar-nav">
</ul>
<div id="center-text">
<ul class="nav navbar-nav navbar-center" id="nav-center">
<li>
<h3>#yield('title')</h3>
</li>
</ul>
</div>
<!-- Right Side Of Navbar -->
<ul class="nav navbar-nav navbar-right">
<!-- Authentication Links -->
#guest
<li>Login</li>
<li>Register</li>
#else
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" style="background-color:blue" style="color:white">
<b>{{ Auth::user()->name }}</b> <span class="caret"></span>
</a>
<ul class="dropdown-menu" style="background-color: blue">
<li>
<a href="{{ route('logout') }}"
onclick="event.preventDefault();
document.getElementById('logout-form').submit();" style="background-color: blue" style="color: white">
<b>Logout</b>
</a>
<form id="logout-form" action="{{ route('logout') }}" method="POST" style="display: none;">
{{ csrf_field() }}
</form>
</li>
</ul>
</li>
#endguest
</ul>
</div>
</div>
</nav>
#yield('content')
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
I wont to make direct page with anchor tag in blade template engine, but its not work.
_sidebar.blade.php
<li class="active treeview">
<a href="{{ url('/') }}">
<i class="fa fa-dashboard"></i> <span>Menu Utama</span>
</a>
</li>
<li class="treeview">
<a href="{{ url('data_jamaah') }}">
<i class="fa fa-users"></i>
<span>Data Jamaah</span>
</a>
routes.php
Route::get('/', 'PagesController#getIndex');
Route::get('data_jamaah', 'PagesController#getJamaah');
PagesController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use App\Inbox;
class PagesController extends Controller
{
public function getIndex() {
return view('pages.index');
}
public function getJamaah() {
return view('pages.data_jamaah');
}
}
The problem is When i click a nothing to happen, thanks for your help
Edit:
This is main.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
#include('partials._head')
#yield('stylesheets')
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
#include('partials._nav')
#include('partials._sidebar')
#yield('content')
<footer class="main-footer">
#include('partials._footer')
</footer>
</div>
#include('partials._javascript')
#yield('javascripts')
</body>
</html>
Your issue is coming from of how you are using adminLTE Sidebar.
When you specify treeview in your class, you will have a dropdown list. And the anchor will be deactivated.
So try something like that :
<li class="active">
<a href="{{ url('/') }}">
<i class="fa fa-dashboard"></i> <span>Menu Utama</span>
</a>
</li>
<li>
<a href="{{ url('data_jamaah') }}">
<i class="fa fa-users"></i>
<span>Data Jamaah</span>
</a>
</li>
I think you can try this hope this work for you:
Route::get('/', 'PagesController#getIndex')->name('home');
Route::get('data_jamaah', 'PagesController#getJamaah')->name('dataJamaah');
<li class="active treeview">
<a href="{{route('home')}}">
<i class="fa fa-dashboard"></i> <span>Menu Utama</span>
</a>
</li>
<li class="treeview">
<a href="{{route('dataJamaah')}}">
<i class="fa fa-users"></i>
<span>Data Jamaah</span>
</a>
Laravel has it's own helper function to create the routes, which you can see here:
https://laravel.com/docs/5.4/helpers#method-route
Edit:
You also need to have a name for your routes to work from the helper function.
On your routes.php:
Route::get('/', ['uses' => 'PagesController#getIndex', 'as' => 'homepage']);
Route::get('data_jamaah', ['uses' => 'PagesController#getJamaah', 'as' => 'data.jamaah']);
You need to change the href from url() to route().
Change
From:
<a href="{{ url('/') }}">
To:
<a href="{{ route('homepage') }}">
and for other route
From:
<a href="{{ url('data_jamaah') }}">
To:
<a href="{{ route('data.jamaah') }}">
And it will work perfectly fine.
If we specify the name the laravel routes automatically gets the route and renders for you.