到达路由器更改 URL，不更新视图答案

【问题标题】：Reach router changes URL, does not update view到达路由器更改 URL，不更新视图
【发布时间】：2020-01-11 20:13:33
【问题描述】：

使用<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;

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

我确实需要/ 和/projects 都使用相同的组件，因为我不希望访问者被扔到<NotFound/>，以防他们直接访问/projects。

This issue 看起来很相似，但是它们导致了代码中的重定向，而我使用的是 <Link/>。

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

更新

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

现在路由工作了。

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

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

【问题讨论】：

标签： javascript reactjs reach-router

【解决方案1】：

我发现@reach/router 被包含在页面中两次。在主项目中，它被包含为 dependency，而在外部库中，它被包含为 devDependency。

这是目录结构的示例，

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

为了修复它，我在主要项目 node_modules 中链接了 @reach/router。

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

cd ~/path_to_external_lib/
yarn link @reach/router

【讨论】：