最简单的 React Router 用例不起作用 - 路由器不会渲染答案

【问题标题】：most trivial React Router usecase not working - Route won't render最简单的 React Router 用例不起作用 - 路由器不会渲染
【发布时间】：2020-08-17 15:38:24
【问题描述】：

我正在用 Typescript 编写我的第一个 React 应用程序。

按照教程，我创建了一个 <Link>，它在我的 <Router> 组件中引用了一个 <Route>。当我在浏览器中单击链接时，URL 会更改，但不会呈现 Route。我无法弄清楚为什么 Route 没有渲染。我已经阅读了一堆 SO 问题，但它们都与路由器的高级使用有关；我无法让最基本的用例工作。

这是我的顶级组件：

import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Link} from "react-router-dom";
import {StaticComponent} from "./StaticComponent/StaticComponent";

export default class App extends Component{
    render() {
        return (
            <div className="App">
                <Router>
                    <header className="App-header">
                        <span>header</span>
                        <Link to="/staticComponent">Static Component</Link>
                    </header>
                    <main>
                        <span>body</span>
                        <Route path="/staticComponent" element={StaticComponent}/>
                    </main>
                </Router>
            </div>
        );
    };
}

这里是静态组件：

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom'

export function StaticComponent () {
    return (
        <h2>You are at Static Component</h2>
    );
};

如您所见，顶级组件按您的预期显示：

但是当我点击链接时，StaticComponent 不显示：

这里有一些小细节我弄错了吗？谢谢！

【问题讨论】：

应该是component={StaticComponent} 而不是element={StaticComponent}
构建失败并出现错误 TS2322: Type '{ path: string;组件：函数组件； }' 不可分配给类型 'IntrinsicAttributes & Pick & Pick, "孩子" | “元素”> & 选择<...>'。 'IntrinsicAttributes & Pick & Pick, "孩子" | "元素"> & 挑选<...>'。

标签： reactjs typescript react-router

【解决方案1】：

我从来不知道如何在<Route> 元素上使用“元素”属性，也不知道如何使用@gbalduzzi 提到的“组件”属性。但是，以以下方式实现 App.tsx 确实有效：

import React, {Component} from 'react';
import {BrowserRouter as Router, Route, Link} from 'react-router-dom';
import {StaticComponent} from "./StaticComponent/StaticComponent";

export default class App extends Component<{}, {}>{
  render() {
    return (
        <div className="App">
          <Router>
            <header className="App-header">
              <span>header</span>
              <Link to="/staticComponent">Static Component</Link>
            </header>
            <main>
              <span>body</span>
              <Route path="/staticComponent">
                <StaticComponent />
              </Route>
            </main>
          </Router>
        </div>
    );
  };
}

另外，StaticComponent.tsx 的第 2 行似乎是不必要的；我已经把它拿出来了。

最后，确保您使用的是正确版本的 React Router。适用于 React Router 5 的 JSX 文件似乎不适用于 React Router 6。

【讨论】：