React Router가 '찾을 수 없음'페이지를 표시하지 않음

Question

내 NotFound 구성 요소를 렌더링 할 수없는 것 같습니다. URL에 임의의 문자 (예 : 'localhost : 3000 / asdfasdfasdfasdf')를 입력 할 때마다 브라우저는 실제로 내용없이 내 주제 구성 요소로 이동합니다.

경로를 설정하는 방법은 다음과 같습니다.

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

render(){
  return (
    <div className="App">
      <Router>
        <NavBar />
        <Switch>
         <Route exact path='/' component={HomepageLayout} />  
         <Route exact path='/:topic' component={Topic} />  
         <Route path='*' component={NotFound} />
        </Switch>
      </Router>
    </div>
  );
 }

export default App;

나는 또한 일부가 조언했듯이 경로를 지정하지 않았지만 이것이 작동하지 않았습니다.

<Route component={NotFound} />

어떤 아이디어?

Answer 1

두 번째 경로에서 언급 한 것처럼 모든 값이 / : topic으로 유지 될 수 있으므로 작동하지 않습니다.이 경로는 이와 같이 추가 할 때 표시됩니다. 왜냐하면, 콜론으로 시작하는 모든 세그먼트가 파라미터로서 취급한다 . 따라서 * 경로는 어떤 경우에도 표시되지 않습니다!