javascript - 到达路由器更改 URL,不更新视图
问题描述
使用<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/>
在每个需要它的项目中复制定义。
解决方案
我发现它@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
推荐阅读
- gitlab - 在 GitLab GUI 中启用预提交挂钩
- url - 如何使用 youtube api 从 bash 中的 ID 生成播放列表?
- node.js - Lambda INSERT INTO MySql 函数正在添加到数据库但仍然超时
- python - Python在可能不同的起始子字符串的子字符串之间拆分字符串
- flutter - 在颤动中处理后台消息时,Firebase Cloud Message 崩溃
- flutter - 尝试从 facebook flutter 登录时电子邮件变空
- html - 如何在不更改文本颜色的情况下更改项目符号列表的背景颜色?
- python - 如何从excel链接熊猫中的分层数据?
- django - docker环境中的ENV变量
- r - 使用 ggplot (geom_sf) 并排排列两个空间地图