javascript - 单击它们时ReactJS路由器链接不起作用
问题描述
我有以下基本ReactJS
但它不会改变路线。
Stackblitz:https ://stackblitz.com/edit/react-testing-routes?file=src%2Fpages%2FPage1.jsx
演示:https ://react-testing-routes.stackblitz.io/page3
这里有源代码:
应用程序.js
import React from "react";
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Page1 from './pages/Page1';
import Page2 from './pages/Page2';
import Page3 from './pages/Page3';
import "./style.css";
export default function App() {
return (
<BrowserRouter>
<Switch>
<Route path="/" component={Page1 } />
<Route path="/page2" component={Page2 } />
<Route path="/page2" component={Page3 } />
</Switch>
</BrowserRouter>
);
}
Page1.jsx
import React from "react";
import { Link } from "react-router-dom";
class Page1 extends React.Component {
constructor(props) {
super(props);
this.state = {
letter: 'A',
};
}
render() {
return <>
<div>You are currently on: Page 1 (Letter: {this.state.letter})</div>
<Link to="/page2">Page 2</Link><br />
<Link to="/page3">Page 3</Link><br />
</>;
}
}
export default Page1;
Page2.jsx
// similar as Page1.jsx
Page3.jsx
// similar as Page1.jsx
包.json
{
"name": "react",
"version": "0.0.0",
"private": true,
"dependencies": {
"react": "17.0.0",
"react-dom": "17.0.0",
"react-router-dom": "^5.2.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"react-scripts": "latest"
}
}
关于如何让它改变路线的任何想法?
谢谢!
解决方案
您需要添加exact
道具,否则/page2
将被匹配/
:
<Switch>
<Route exact path="/" component={Page1} />
<Route exact path="/page2" component={Page2} />
<Route exact path="/page3" component={Page3} />
</Switch>
https://stackblitz.com/edit/react-testing-routes-ktkwg5?file=src.jsx
推荐阅读
- java - 如何根据模式替换任意位置的任意字符
- python - python复制excel数据
- ros - 用于传感器融合(IMU 和压力)数据的 Ros 包?
- c++ - CMake:CMAKE_REQUIRED_LIBRARIES 中的库顺序,用于在配置时测试最小程序
- reactjs - store.getState() 在 index.js 中返回空值
- angular - 迁移到 Angular 12 后 Cytoscape.js“超出最大调用堆栈大小”错误
- jquery - 反转div内儿童的计数
- magento - 为什么 default_head_blocks.xml 不删除 css 文件?
- pandas - 如何使用文档短语在 Spacy 中拆分并提取特定单词
- reactjs - reactjs - 如何在react js中显示路径在json文件中的图像?