Question

我正在尝试学习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匹配时（单击NavLinks或手动键入URL），路径不会显示组件。

基本（'/'）路线有效并显示HOME H1。

我知道路线是匹配的，因为如果我尝试对所有路线都使用render属性，那么它将起作用。

没有编译错误，没有控制台错误。
该示例代码包含Switch标签，但我也尝试过没有，结果相同。
示例代码具有一个NavLink和一个Route，其中一个baseUrl const和一个不带const的容器，我尝试了其中一种方法（都没有，一个是，一个不是），结果相同。

Answer 1

{{createAppForm.invalid}}的组成要素称为Route，而不是component，其首字母为Component。

路由匹配时，React Router不显示组件（但渲染有效）

1 个答案: