不知道我要去哪里错，我看了其他问题，似乎很相似，但仍然无法正常工作。
即使路线更改，单击主页或集合也会显示主页组件。我的收藏集组件只是一个简单<h1>hello collections</h1>而从未显示过的组件。家庭总是保持流行。
我有我的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;
其中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>
)
<Route exactly component={Home} pattern="/" />
应该说<Route exact ...不是<Route exactly ...。此外，它应该说path="/"没有pattern="/"（同为其他路线）。由于该路线实际上并未定义为exact，这意味着该Home组件将始终显示（因为每条路线都将与匹配/）。因此，您的路线应为：
<Switch>
<Route exact component={Home} path="/" />
<Route exact component={Collections} path="/Collections" />
</Switch>
您的Collection路线/链接中也有错字。该路线表示为：
<Route exactly component={Collections} pattern="/Collections" />
Collections是复数。但是在您的链接中，Collection单数是：
<li><Link to="/Collection">Collection</Link></li>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句