当路由匹配时，React Router 不显示组件（但渲染工作）

Posted 2023-02-22

【中文标题】当路由匹配时，React Router 不显示组件（但渲染工作）

【英文标题】：React Router doesn't display component when route is matched (but render works)

【发布时间】：2018-12-18 13:40:03

【问题描述】：

我正在尝试学习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"  />
          <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 和一个没有，我尝试过任何一种方式（无，两者， 一个是，一个不是），同样的结果。

【参考方案1】：

带有组件的Route 的prop 称为component，而不是大写c 的Component。

<Route path='/Bar' exact component=Bar />

【讨论】：

工作就像一个魅力。非常感谢，我仍然需要习惯符号和命名约定。

@SaverioTerracciano 太棒了！不客气。是的，这是一个很常见的错误。