Компонент не загружается при изменении маршрута - PullRequest
Новая
       47

Компонент не загружается при изменении маршрута

0 голосов
/ 13 апреля 2020

Я использую Preact. Сначала я попробовал preact-router, а затем wouter для маршрутизации, но проблема все еще существует для одного указанного c компонента. Вот основная запись, где определены все маршруты: 

import { h, Component } from 'preact';
import { Route } from "wouter-preact";
import Header from './partials/header';

import Home from './pages/home';
import News from './pages/news';
import Article from './pages/article';

export default class App extends Component {

    render() {
        return (
            <div id="app">
                <Header />
                <Route path="/"><Home /> </Route>  // working perfectly 
                <Route path="/a/:article">  <Article /> </Route>  // not working
                <Route path="/n/:newspaper"><News /> </Route>  // working
            </div>
        );
    }
}

, а вот упрощенный второй компонент, который работает отлично: 

import { h, Fragment } from 'preact';
import { Link, Route } from "wouter-preact";
import useFetch from '../../utils/ajax';



export default function News() {
    const url = window.location.pathname.split('/');
    const { data, loading } = useFetch(domain + '/api/v1/news/?newspaper=' + url[2]);

    return (
        <Fragment>
            {loading ? (
                // loading indicator
            ) : (
                <main role="main">
                    <div className="py-5">
                        <div className="container">
                            <div className="row">

                                {data.results.map((nisha, index) => (
                                    <div className="col-sm-6" key={index}>
                                        <div className="col-md-10" >
                                            <div className="card mb-2 shadow-lg" style={{ border: 'none' }} >
                                                <Link href={'/a/' + nisha.slug}>
                                                    <img className="card-img-top" src={ nisha.cover_image } alt={ nisha.slug } />
                                                </Link>
                                                <div className="card-body">
// body
                                                    <div className="card-footer text-muted">
// footer

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                ))}

                            </div>
                        </div>
                    </div>
                </main>
            )}
        </Fragment>
    );
}

и, наконец, проблемный компонент c, когда Я нажимаю любую ссылку из предыдущего компонента, URL-адрес браузера изменяется, но компонент не загружается (в консоли браузера нет сообщения отладочной консоли). 

export default function Article() {
    console.log("loaded");
    return (
        <div className="main">
            <div className="py-5">
                <div className="column">
                    <div>example article</div>
                </div>
            </div>
        </div>
);
}
...