Javascript react路由器dom和typescript不显示组件

我不确定我会错在哪里，我看了其他问题，结果似乎是类似的，仍然不起作用

即使管线发生更改，单击“主”或“集合”也会显示“主”构件。“我的收藏”组件只有一个简单的

hello collections

，它永远不会显示出来。家总是很流行

我有我的app.tsx文件：

import React from 'react';
import {Nav} from './layout/header/Nav';
import {Home} from './templates/home/Home';
import {Collections} from './templates/collections/Collections';
import { BrowserRouter as Router, Route, Link, Switch } from "react-router-dom";

import './App.scss';


const App: React.FC = () => {
  return (
        <Router>
            <Nav/>
            <div className="main-content">
                <div>
                    <Switch>
                        <Route exactly component={Home} pattern="/" />
                        <Route exactly component={Collections} pattern="/Collections" />
                    </Switch>
                </div>
            </div>

        </Router>
  );
}

export default App;

从“React”导入React；
从“./layout/header/Nav”导入{Nav}；
从“./templates/Home/Home”导入{Home}；
从“./templates/Collections/Collections”导入{Collections}；
从“react Router dom”导入{BrowserRouter as Router，Route，Link，Switch}；
导入“/App.scss”；
常量应用程序：React.FC=（）=>{
返回(
);
}
导出默认应用程序；

其中Nav.tsx：

import React from 'react';
import {Link} from "react-router-dom";

import './nav.scss';

export const Nav:React.SFC = () => (
        <nav>
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/Collection">Collection</Link></li>
            </ul>
        </nav>
)

从“React”导入React；
从“react router dom”导入{Link}；
导入“/nav.scss”；
导出常量导航：React.SFC=（）=>(

家
收藏

)

---

您的

收藏中也有输入错误

路线/链接。路线说明如下：

<Route exactly component={Collections} pattern="/Collections" />

<Switch>
    <Route exact component={Home} path="/" />
    <Route exact component={Collections} path="/Collections" />
</Switch>

<Route exactly component={Collections} pattern="/Collections" />

<li><Link to="/Collection">Collection</Link></li>