1

を使用<Link to="/projects/some-project-slug" />するとブラウザの URL が変更されますが、アプリの表示は変更されません。

アプリは次のとおりです。

import React from 'react';
import { Router } from "@reach/router"

import HeaderNavItems from '../../constants/header-nav-items';

import Header from '../header/header';
import Footer from '../footer/footer';

import AboutView from '../../views/about/about-view';
import NotFoundView from '../../views/not-found/not-found-view';
import ProjectDetailsView from '../../views/project-details/projects-details-view';
import ProjectsIndexView from '../../views/projects-index/projects-index-view';

import config from '../../config.json';


import './app.scss';


const App = () => {
  const { common } = config;

  // component
  return <div className="app">
    <Header
      heading={ common.heading }
      subheading={ common.subheading }
      navItems={ HeaderNavItems }
    />
    <Router>
      <ProjectsIndexView path='/' />
      <ProjectsIndexView path='/projects' />
      <ProjectDetailsView path='/projects/:projectSlug' />
      <AboutView path='/about' />
      <NotFoundView default />
    </Router>
    <Footer
      heading={ common.heading }
      subheading={ common.subheading }
    />
  </div>
};

export default App;

<Link/>そして、 ( でインスタンス化された<ProjectsIndexView/>)を含むコンポーネントは次のとおりです。

import React from 'react';
import { Link } from '@reach/router';

import themeModel from '../../models/ThemeModel';

import './project-teaser.scss';


const ProjectTeaser = (props) => {
  const render = () => (
    <Link
      className={ `project-teaser ${themeModel.current}` }
      to={ props.href }
    >
      <img
        className="image"
        src={ props.imageSource }
        alt=""
      />
      <div className="project-name">
        { props.name }
      </div>
    </Link>
  );

  return render();
}

export default ProjectTeaser;

の URLprops.hrefは正しいです。リダイレクト先の URL でブラウザを更新すると、ビューのみが機能します。ページの更新が必要ないようにしています。

両方が必要で、同じコンポーネント/を使用します。訪問者が直接アクセスした場合に、訪問者が にスローされないようにするためです。/projects<NotFound/>/projects

この問題は似ているように見えましたが、コードでリダイレクトを引き起こしていますが、<Link/>.

ガイダンスと丁寧な回答をいただければ幸いです。

アップデート

<ProjectTeaser/>コンポーネントは外部ライブラリで定義されています。このコンポーネントを使用するプロジェクトは 3 ～ 4 件あります。楽しみのために、それを使用する同じプロジェクトでコンポーネント定義をコピーしようとしました。これは、外部ライブラリからインポートされなくなったことを意味します。

これでルーティングが機能します。

これがどのように起こるか誰かが私に説明できますか? 同じコードです！異なるプロジェクトにあるだけです。私が見る唯一の違いは、ライブラリのバージョンがプリコンパイルされていることです。

<ProjectTeaser/>ただし、これが @reach/router ライブラリの期待どおりに機能している場合は、それを必要とするすべてのプロジェクトで定義をコピーする必要がないようにしようとしているため、非常に不便です。

4

1 に答える 1

0

@reach/routerページに 2 回含まれていることがわかりました。メイン プロジェクトでは として含まれてdependencyおり、外部ライブラリでは として含まれていdevDependencyます。

ディレクトリ構造の例を次に示します。

+-- main_project_path
|   +-- node_modules
|       +-- external_lib      <-- [linked]
|       +-- @reach/router
|
+-- external_lib
|   +-- node_modules
|       +-- @reach/router

@reach/routerそれを修正するために、メインプロジェクト内でリンクしましたnode_modules。

cd ~/main_project_path/node_modules/@reach/router
yarn link

cd ~/path_to_external_lib/
yarn link @reach/router
于 2021-06-17T22:57:06.843 に答える