반응 라우터 v4 기본 페이지 (페이지를 찾을 수 없음)

반응 라우터 v4 기본 페이지 (페이지를 찾을 수 없음)

---

이것은 일치하지 않는 요청을 찾을 수없는 페이지로 보내는 일반적인 목적입니다.

react-router v4로 이것을 만드는 것은 이전 버전처럼 보이며이 샘플이 아래에서 작동 할 것으로 예상합니다. 링크는 잘 작동하지만 알 수없는 URL 만 요청한 NotFound 구성 요소를 기대합니다. 하지만 항상 거기에 있습니다.

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


class Layout extends Component {
  render() {
    return (
    <Router>
      <div className="App">
        <ul>
          <li><Link to="/">Home</Link></li>
          <li><Link to="/user">User</Link></li>
        </ul>
        <Route exact path="/" component={Home}/>
        <Route path="/user" component={User}/>
        <Route path="*" component={Notfound}/>
      </div>
  </Router>
    );
  }
}

path="*"모든 요청과 찾지 못한 구성 요소를 항상 나타 내기 때문에 유효한 URL 경로에 대해이 구성 요소를 숨기는 방법은 무엇입니까?

---

React Router의 No Match 문서에서 이에 대해 설명합니다. <Switch>구성 요소 를 가져와야 하며 path속성을 모두 제거 할 수 있습니다 .

A 는 일치 <Switch>하는 첫 번째 자식 <Route>을 렌더링합니다 . <Route>경로가없는 A 는 항상 일치합니다.

다음을 사용하는 예입니다.

<Router>
  <div>
    <Switch>
      <Route path="/" exact component={Home}/>
      <Redirect from="/old-match" to="/will-match"/>
      <Route path="/will-match" component={WillMatch}/>
      <Route component={NoMatch}/>
    </Switch>
  </div>
</Router>

따라서 귀하의 경우에는 간단히 다음 path="*"을 소개하십시오 <Switch>.

<Switch>
  <Route exact path="/" component={Home}/>
  <Route path="/user" component={User}/>
  <Route component={Notfound} />
</Switch>

Switch귀하의 import진술에 상단 에 포함 시키는 것을 잊지 마십시오 .

---

이것은 두 가지 구성 요소가있는 내 솔루션입니다.

const NotFound = () => <div>Not found</div>

const NotFoundRedirect = () => <Redirect to='/not-found' />

//root component
<Switch>
 <Route path='/users' component={UsersPages} />
 <Route path='/not-found' component={NotFound} />
 <Route component={NotFoundRedirect} />
</Switch>

//UsersPages component
<Switch>
 <Route path='/home' component={HomePage} />
 <Route path='/profile' component={ProfilePage} />
 <Route component={NotFoundRedirect} />
</Switch>

저에게 완벽합니다. 감사.

---

수락 솔루션이 답을 제공하지만 중첩 된 경로가 있으면 작동하지 않습니다.

예를 들어 Home구성 요소 /home에 /dashboard와 같은 중첩 된 경로 가 있고 방문한 URL이 /db인 경우 NotFound전체 페이지가 아닌 경로 섹션 내에서만 구성 요소를 표시합니다 .

이를 방지하기 위해 구성 요소와 공급자를 사용하는 매우 간단한 조정을 수행 할 수 있습니다.

const NoMatch = (props) => (
    <Redirect to={{state: {noMatch: true}}} />
)

const ProviderHOC = (NotFoundRoute) => {
    const RouteProvider = (props) => {
        if(props.location && props.location.state && props.location.noMatch) {
           return  <NotFoundRoute {...props} />
        }
        return props.children;
    }
    return withRouter(RouteProvider)

}

export default ProviderHOC;

그리고 다음과 같이 사용할 수 있습니다.

const RouteManager  = ProviderHOC(NotFoundComponent);

<Router>
  <RouteManager>
    <Switch>
      <Route path="/" exact component={Home}/>
      <Redirect from="/old-match" to="/will-match"/>
      <Route path="/will-match" component={WillMatch}/>
      <NoMatch />
    </Switch>
  </RouteManager>
</Router>

및 홈 구성 요소 내

render() {
    return (
         <Switch>
               <Route path="/home" component={NewHome} />
               <Route path="/dashboard" component={Dashboard} />
               <NoMatch />
         </Switch>
    )
}

---

나를 위해 작동하지 않습니다. 특히이 구성을 사용하고 있습니다.

그래서 홈페이지 컴포넌트의 렌더링 기능에서 경로를 확인해야합니다. 이 같은:

render(){
const {match, location, history} = this.props;
if (location.pathname === '/'){
return (<div>Home</div>)
}else{
return null
}
}

참조 URL : https://stackoverflow.com/questions/42929472/react-router-v4-default-pagenot-found-page