Unknown variable in Laravel how to fix?

Question

Laravel

There are two routes

Route::get('/', '[email protected]')->name("home");
Route::get('/article/{id}', '[email protected]')->name('article');

And two controllers

class ArticleController extends Controller
{
    public function index($id)
    {
        $article = Article::query()->select('*')->where('id', $id)->get();

        return view('default.articles.news', ['article' => $article]);
    }
}

class IndexController extends Controller
{
    private $perPage = 9;

    public function index()
    {
        $articles = Article::query()->select('*')->paginate($this->perPage);

        return view('index', ['articles' => $articles]);
    }
}

On the main page (index.blade.php) I display articles

@section('mainContent')
<div class="container">
        <div class="row mt-4 d-flex justify-content-between">


            @foreach($articles as $article)

                <div class="card-deck col-sm-12 col-md-6 col-lg-4 col-xl-4 mt-2 mb-4">
                    <div class="card">
                        <img class="card-img-top rounded-top" height="190" src="{{ $article->poster }}">
                        <div class="card-body">
                            <h5 class="card-title"><a href="{{ route('article', ['id' => $article->id]) }}">{{ $article->title }}</a></h5>
                            <p class="card-text" style="color: #000000">{{ $article->preview }}</p>
                        </div>
                        <div class="card-footer">
                            <small class="text-muted">Дата публикации: {{ $article->created_at }}</small>
                        </div>
                    </div>
                </div>

            @endforeach


            @if(count($articles) > $articles->perPage())

                <div class="container">
                    <div class="row d-flex justify-content-center mt-2 mb-2">
                        {{ $articles->links() }}
                    </div>
                </div>

            @endif

        </div>
    </div>
@endsection

newsblade.php

@extends('index')

@section('mainContent')
{{ $article }}
@endsection

But when I go to the page /article/1 it says

Undefined variable: articles
(View: C:\Web\MyHost\laravel\resources\views\index.blade.php) 
(View: C:\Web\MyHost\laravel\resources\views\index.blade.php)

Answer 1

UPD: before news.blade.php is rendered, your template index (@extends('index')) is loaded first, where $articles doesn't exist
Solution: there shouldn't be any @extends in news.blade.php
------ ---------------------------------
need more code, fix the question and add the template and this default.articles.news view .blade.php
and for now, here is this flaw:

class ArticleController extends Controller
{
    public function index($id)
    {
        $article = Article::query()->select('*')->where('id', $id)->first();

        return view('default.articles.news', ['article' => $article]);
    }
}

Here is another improvement for ArticleController:

use App\Article;

class ArticleController extends Controller
{
    public function index(Article $article)
    {
        return view('default.articles.news', ['article' => $article]);
    }
}

but ideally the ArticleController should return all articles in the index method, and show a single article in the show method,
and the IndexController is not needed at all, in this case