Почему всегда срабатывает не нужный patch в React Browser Router?

Question

[bzotsss]

Всем привет , у меня два вопроса :
1) Почему всегда рендерится комп. NotFoundNotFound ? По моей задумке он должен рендериться только если такого patch не существует .
2) Как сделать рендер определённого компонента ТОЛЬКО если такого patch нигде не существует ? Гуглил нашёл patch="*" но для меня такой вариант почему то не работает : ( . Ниже код.

import "./styles.css";
import TestComponent from "./TestComp";
import TestComponent2 from "./TestComp2";
import { Link, Route, BrowserRouter, Switch } from "react-router-dom";
const NotFound = () => {
  return <div>Not Found</div>;
};
export default function App() {
  return (
    <BrowserRouter>
      <Switch>
        <div className="App">
          <Link to="/test/1">Link</Link>
          <Link to="/test/2">Link2</Link>
          <Route path="*" exact component={NotFound} />
          <Route path="/test/1" exact component={TestComponent} />
          <Route path="/test/2" component={TestComponent2} />
        </div>
      </Switch>
    </BrowserRouter>
  );
}

И ссылка на sandbox https://codesandbox.io/s/dreamy-zhukovsky-r0nt4?fi... . Спасибо!

Answer 1

[Mikhail Osher]

Внутри Switch срабатывает первый найденный роут. Поставьте NotFound последним.

https://reactrouter.com/web/api/Switch

Comments

[bzotsss]

Спасибо!