react-router-dom <Link> 更改路由，但在用户单击页面之前不会呈现

Question

我正在使用react router dom 5.2.0切换到我的应用程序中的无状态组件，但尽管URL发生了更改，但该组件从未立即呈现，除非我单击页面。一般来说，路由似乎被破坏了，因为即使在交互之后，导航回"/家；不起作用。我已经阅读了许多关于这方面的教程，并对许多内容进行了三次检查，确保我使用的是"；精确的"；"中的关键字；路由"；并且先订购最具体的路线，所以我不明白为什么这不起作用。

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
import Navbar from './components/Navbar.js';
import styles from './less/index.less'
import { BrowserRouter as Router } from 'react-router-dom';
ReactDOM.render(<Router><App />
</Router>, document.getElementById('app'));

app.js

import React, { Component } from 'react';
import Navbar from './components/Navbar';
import Home from './components/Home';
import Stuff from './components/Stuff';
import { Route, Switch, withRouter } from 'react-router-dom';

class App extends Component{
render(){
return(
<div class="intro">
<Navbar />
<h1>Hello World</h1>
<Switch>
<Route exact path="/stuff" component={Stuff} />
<Route exact path="/" component={Home} />
</Switch>
</div>
);
}
}
export default App;

Navbar.js

import React, { Component } from 'react';
import styles from '../less/Navbar.less'
import { Link } from 'react-router-dom';
class Navbar extends Component{
render(){
return(
<div class="navbar">
<div><Link to="/">Home</Link></div>
<div><Link to="/things">Things</Link></div>

<div class="dropdown">
<button class="dropbtn">Writing
<i class=""></i>
</button>
<div class="dropdown-content">
<ul>
<Link to="/stuff">Stuff</Link>
<Link to="/">Stuff2</Link>
<Link to="/">Stuff3</Link>
</ul>

</div>
</div>

</div>
);
}
}
export default Navbar;

Stuff.js

import React, { Component } from 'react';
export default class Stuff extends Component{
render(){
return(
<div>
STUFF COMPONENT
</div>
);
}
}

我制作了"；主页"；组件只是有一个默认值，它只是返回一个"；HOME COMPONENT"；像"；Stuff"做

那么，为什么这不起作用呢？我需要改变状态吗；componentDidMount"；内部"；Stuff"真正使其呈现？还是我的包裹有问题？

编辑：这是我的包.json；react dom"反应路由器dom"；，以及"；反应路由器"；彼此冲突还是什么？

{
"name": "Apollo_Website",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"start": "webpack-dev-server --mode development --open --hot",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@babel/runtime": "^7.12.5",
"@types/webpack-env": "^1.16.0",
"@webpack-cli/info": "^1.1.0",
"@webpack-cli/init": "^1.0.3",
"@webpack-cli/serve": "^1.1.0",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.4",
"babel-node": "0.0.1-security",
"babel-plugin-require-context-hook": "^1.0.0",
"babel-plugin-require-context-hook-babel7": "^1.0.0",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-register": "^6.26.0",
"core-js": "^3.7.0",
"css": "^3.0.0",
"css-loader": "^5.0.1",
"file-loader": "^6.2.0",
"history": "^5.0.0",
"html-webpack-plugin": "^4.5.0",
"image-webpack-loader": "^7.0.1",
"imagemin": "^7.0.1",
"imagemin-gifsicle": "^7.0.0",
"imagemin-mozjpeg": "^9.0.0",
"imagemin-optipng": "^8.0.0",
"imagemin-pngquant": "^9.0.1",
"imagemin-svgo": "^8.0.0",
"imagemin-webp": "^6.0.0",
"loose-envify": "^1.4.0",
"mime-types": "^2.1.27",
"npm": "^6.14.9",
"object-assign": "^4.1.1",
"prop-types": "^15.7.2",
"punycode": "^2.1.1",
"querystring": "^0.2.0",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"react-router": "^5.2.0",
"recursive-readdir": "^2.2.2",
"schema-utils": "^3.0.0",
"tiny-invariant": "^1.1.0",
"tiny-warning": "^1.0.3",
"url": "^0.11.0",
"url-loader": "^4.1.1",
"webpack": "^4.44.2",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^5.3.0",
"yarn": "^1.22.10"
},
"devDependencies": {
"babel-runtime": "^6.26.0",
"bootstrap": "^4.5.3",
"chalk": "^2.4.2",
"cross-spawn": "^6.0.5",
"findup-sync": "^3.0.0",
"global-modules": "^2.0.0",
"home-or-tmp": "^3.0.0",
"img-loader": "^3.0.2",
"import-local": "^2.0.0",
"interpret": "^1.4.0",
"less": "^3.12.2",
"less-loader": "^7.0.2",
"loader-utils": "^1.4.0",
"lodash": "^4.17.20",
"mkdirp": "^1.0.4",
"react-router-dom": "^5.2.0",
"resolve-url-loader": "^3.1.2",
"source-map-support": "^0.5.19",
"style-loader": "^2.0.0",
"supports-color": "^6.1.0",
"v8-compile-cache": "^2.2.0",
"yargs": "^13.3.2"
},
"description": ""
}

Answer 1

不确定到底是什么问题。我用了你的代码，用最少的修改创建了一个工作示例。您可能有一些依赖关系的糟糕版本，或者可能有更多的代码可以共享？看看这个例子，并将你的项目与之进行比较：

import React, { Component } from "react";
import { BrowserRouter, Link, Route, Switch } from "react-router-dom";
class Home extends Component {
render() {
return <div>HOME COMPONENT</div>;
}
}
class Stuff extends Component {
render() {
return <div>STUFF COMPONENT</div>;
}
}
class MyApp extends Component {
render() {
return (
<div>
<Navbar />
<h1>Hello World</h1>
<Switch>
<Route exact path="/stuff" component={Stuff} />
<Route exact path="/" component={Home} />
</Switch>
</div>
);
}
}
class Navbar extends Component {
render() {
return (
<div class="navbar">
<div>
<Link to="/">Home</Link>
</div>
<div>
<Link to="/stuff">Stuff</Link>
</div>
<div class="dropdown">
<button class="dropbtn">
Writing
<i class=""></i>
</button>
<div class="dropdown-content">
<ul>
<Link to="/stuff">Stuff</Link>
<Link to="/">Stuff2</Link>
<Link to="/">Stuff3</Link>
</ul>
</div>
</div>
</div>
);
}
}
export default function App() {
return (
<BrowserRouter>
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
</div>
<MyApp />
</BrowserRouter>
);
}

Answer 2

尝试使用此

<Switch>
<Route exact path="/stuff"><Stuff/></Route>
<Route exact path="/"><Home/></Route>
</Switch>

Answer 3

感谢jack.benson的评论，我发现我的依赖关系成了问题。我有"；react router dom"；及其在"；devDependencies"；。我把它全部移到"；依赖性"；，而且效果非常好。我将重新学习依赖关系与devDependencies，以避免再次出现这种情况。谢谢jack！