reactjs - ReactJS - React Router 没有改变组件但 url 正在改变
问题描述
我是 ReactJS 的新手,最近开始学习。我使用 TSX 创建了 2 个组件 home 和 ContactList。我正在使用 React-Router 更改路由。
应用程序.JS
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { Header } from "./Grid/header";
import { Footer } from "./Grid/footer";
import { Menulink } from './Grid/Menulinks';
import { Home } from './Grid/Home';
import { ContactList } from './Grid/ContactList';
class App extends Component {
render() {
return (
<div>
<Header title="This is Header">
</Header>
<Menulink></Menulink>
<Router>
<switch>
<Route exact path="/" component={Home} />
<Route path="/contact" component={ContactList} />
</switch>
</Router>
<Footer></Footer>
</div>
)
}
}
export default App;
菜单链接.tsx:
import * as React from 'react';
import { Link, BrowserRouter as Router } from "react-router-dom";
export class Menulink extends React.Component {
render() {
return (
<Router>
<switch>
<Link to="/">Home </Link> |
<Link to="/contact">Contact List</Link>
</switch>
</Router>
)
}
}
问题是,当我单击链接时,URL 会更改,但组件没有被替换。是因为我在不同的文件中编写了链接和路由吗?
解决方案
首先,您需要有一个Router
实例
其次,MenuLink 需要被渲染为 Router 的 Child
三、导入Switch
自react-router-dom
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";
import { Header } from "./Grid/header";
import { Footer } from "./Grid/footer";
import { Menulink } from './Grid/Menulinks';
import { Home } from './Grid/Home';
import { ContactList } from './Grid/ContactList';
class App extends Component {
render() {
return (
<div>
<Header title="This is Header">
</Header>
<Router>
<Route component={Menulink} />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/contact" component={ContactList} />
</Switch>
</Router>
<Footer></Footer>
</div>
)
}
}
export default App;
import * as React from 'react';
import { Link, BrowserRouter as Router } from "react-router-dom";
export class Menulink extends React.Component {
render() {
return (
<React.Fragment>
<Link to="/">Home </Link> |
<Link to="/contact">Contact List</Link>
</React.Fragment>
)
}
}
推荐阅读
- android - 如何使用cordova插件ble回调的第二个参数?
- scala - 在具有分隔值的 spark Scala 数据框中查找 Sum
- php - 如何加入表格并显示它?
- gcc - 为什么在没有地址清理程序的情况下会发生缓冲区溢出?
- python - 为什么多处理挂起?
- wordpress - 如何删除网站底部的间距
- flutter - 如何在泛型 Dart 方法中对泛型类型 T 实施实施约束?
- java - 尝试连接 SMTP 主机时,收到此错误 SocketException: Connection reset
- c# - 如何通过 Azure 中的 Dot Net core Web APi 提供静态网站内容
- azure - 使用 Graph API 设置企业应用程序的签名选项