javascript - 当路由匹配时,React Router 不显示组件(但渲染工作)
问题描述
我正在尝试学习React
和使用Create-React-App
来进行实验。
今天我想学习如何使用React Router
,但我无法让它工作。
这是我的代码:(App.js
)
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route, Link, NavLink, Switch } from 'react-router-dom'
import { Navbar, Jumbotron, Button } from 'react-bootstrap';
class App extends Component {
render() {
const baseUrl = process.env.PUBLIC_URL;
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">React Star Wars Table Test</h1>
</header>
<Router>
<div>
<NavLink to={baseUrl + '/Foo'}>Foo</NavLink> <NavLink to={'/Bar'}>Bar</NavLink>
<hr />
<Switch>
<Route path="/" exact render={() => (<h1>HOME</h1>)} />
<Route path={baseUrl + "/Foo"} exact Component={Foo} />
<Route path='/Bar' exact Component={Bar} />
</Switch>
</div>
</Router>
</div>
);
}
}
class Foo extends Component {
render() {
return (
<p>Foo!</p>
);
}
}
class Bar extends Component {
retnder(){
return (
<h1>Bar!</h1>
);
}
}
export default App;
问题是路由在匹配 URL 时不显示组件(单击 NavLink 或手动输入 URL)。
基本 ('/') 路由工作并显示 HOME H1。
我知道路由是匹配的,因为如果我尝试render
对所有路由使用该属性,它就会起作用。
- 没有编译错误,没有控制台错误。
- 示例代码包含
Switch
标签,但我也尝试过没有相同的结果。 - 示例代码有一个
NavLink
和一个Route
带有 baseUrl const 和一个没有,我尝试过任何一种方式(无,两者,一个是和一个不是),结果相同。
解决方案
Route
带有组件的 prop被称为component
,而不是Component
大写c
。
<Route path='/Bar' exact component={Bar} />
推荐阅读
- php - Woocommerce 产品页面上的 PHP 代码显示不正确的百分比
- reactjs - 我们可以在 useReducers 方法中使用条件吗
- php - 未找到资产 10 月 CMS
- javascript - SVG:悬停时在 p 标签中显示替代文本
- python - 我想创建一个只对管理员可见的频道 discord.py
- express - express-validator 中的“等于”如何工作?
- sas - 获取分配给 SAS 元数据中应用程序服务器的库列表
- html - css 和 html 问题“如何在我的设计中添加关闭选项卡”
- python - SSL:CERTIFICATE_VERIFY_FAILED PYTHON 和 PANDAS
- javascript - 从 pdf 文件中提取输入列表(字段)以在 react js 中创建 html 表单