javascript - 路由更改时组件未加载

Question

我正在使用 Preact。我首先尝试了 preact-router，然后尝试了 wouter 进行路由，但是对于一个特定的组件，问题仍然存在。这是定义所有路由的主要条目：

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>
    );
}

最后是有问题的组件，当我单击上一个组件的任何链接时，浏览器 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>
);
}

标签： javascriptreactjspreact