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;

这是包含 a 的组件<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;

中的网址props.href是正确的。如果我在重定向到的 URL 处刷新浏览器，那么只有视图才能工作。我试图确保不需要刷新页面。

我确实需要这两者/并/projects使用相同的组件，因为我不希望访客被扔到<NotFound/>他们直接去的地方/projects。

这个问题看起来很相似，但是它们导致代码中的重定向，而我使用的是<Link/>.

任何指导和尊重的回答将不胜感激。

更新

该<ProjectTeaser/>组件在外部库中定义。有 3-4 个项目使用此组件。为了好玩，我尝试将组件定义复制到使用它的同一个项目中，这意味着它不再是从外部库导入的。

现在路由工作。

谁能向我解释这是怎么发生的？这是相同的代码！只是位于不同的项目中。我看到的唯一区别是库版本是预编译的。

但是，如果这正如@reach/router 库所期望的那样工作，那将非常不方便，因为我试图避免必须<ProjectTeaser/>在每个需要它的项目中复制定义。

4

1 回答 1

0

我发现它@reach/router被包含在页面中两次。在主项目中，它被包含为 a 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 回答