response-router-dom и машинопись не отображают компоненты

Question

Не уверен, где я иду не так, я смотрел на другие вопросы, и кажется, что это похоже и все еще не работает.

При щелчке как дома, так и коллекции отображается домашний компонент, даже если маршрут меняется. У моего компонента коллекций просто есть <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>
)

Answer 1

<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" />

Collection с во множественном числе. Но в вашей ссылке Collection является единственным:

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