리액트 라우터:경로를 찾을 수 없습니다.

리액트 라우터:경로를 찾을 수 없습니다.

다음 사항을 고려하십시오.

var AppRoutes = [
    <Route handler={App} someProp="defaultProp">
        <Route path="/" handler={Page} />
    </Route>,

    <Route  handler={App} someProp="defaultProp">
        <Route path="/" handler={Header} >
            <Route path="/withheader" handler={Page} />
        </Route>
    </Route>,

    <Route handler={App} someProp="defaultProp">
        <Route path=":area" handler={Area} />
        <Route path=":area/:city" handler={Area} />
        <Route path=":area/:city/:locale" handler={Area} />
        <Route path=":area/:city/:locale/:type" handler={Area} />
    </Route>
];

App 템플릿, HeaderTemplate 및 Parameterized 루트 세트가 동일한 핸들러(App 템플릿 내)에 있습니다.404개의 노선이 불통일 때 운행할 수 있도록 하고 싶습니다.예를 들어 /CA/SanFrancisco는 Area에서 검색 및 처리해야 하며 /SanFranciscoz는 404여야 합니다.

경로를 빠르게 테스트하는 방법은 다음과 같습니다.

['', '/', '/withheader', '/SanFranciscoz', '/ca', '/CA', '/CA/SanFrancisco', '/CA/SanFrancisco/LowerHaight', '/CA/SanFrancisco/LowerHaight/condo'].forEach(function(path){
    Router.run(AppRoutes, path, function(Handler, state){
        var output = React.renderToString(<Handler/>);
        console.log(output, '\n');
    });
});

문제는 /SanFranciscoz는 항상 Area 페이지에서 처리되는데 404로 해 주셨으면 합니다.또한 첫 번째 루트 설정에 NotFoundRoute를 추가하면 모든 Area 페이지가 404로 표시됩니다.

<Route handler={App} someProp="defaultProp">
    <Route path="/" handler={Page} />
    <NotFoundRoute handler={NotFound} />
</Route>,

내가 뭘 잘못하고 있지?

여기 다운로드 받아 실험할 수 있는 요지가 있습니다.

https://gist.github.com/adjavaherian/aa48e78279acddc25315

react-router 1.0.0에서 DefaultRoute와 NotFoundRoute가 삭제되었습니다.

아스타리스크가 붙어 있는 디폴트루트가 현재 계층 수준에서 마지막으로 기능해야 함을 강조하고 싶습니다.그렇지 않으면 트리에서 그 뒤에 표시되는 다른 모든 루트가 덮어쓰게 됩니다.이는 이 루트가 처음이고 모든 경로와 일치하기 때문입니다.

리액트 라우터 1, 2, 3의 경우

404를 표시하고 경로를 유지하는 경우(Not Found Route와 동일한 기능)

<Route path='*' exact={true} component={My404Component} />

404 페이지를 표시하지만 URL을 변경하는 경우(DefaultRoute와 동일한 기능)

<Route path='/404' component={My404Component} />
<Redirect from='*' to='/404' />

여러 수준의 예제:

<Route path='/' component={Layout} />
    <IndexRoute component={MyComponent} />
    <Route path='/users' component={MyComponent}>
        <Route path='user/:id' component={MyComponent} />
        <Route path='*' component={UsersNotFound} />
    </Route>
    <Route path='/settings' component={MyComponent} />
    <Route path='*' exact={true} component={GenericNotFound} />
</Route>

리액트 라우터 4 및 5의 경우

경로를 유지하다

<Switch>
    <Route exact path="/users" component={MyComponent} />
    <Route component={GenericNotFound} />
</Switch>

다른 루트로 리다이렉트(url 변경)

<Switch>
    <Route path="/users" component={MyComponent} />
    <Route path="/404" component={GenericNotFound} />
    <Redirect to="/404" />
</Switch>

순서가 중요해!

리액트 라우터의 새로운 버전에서는 최초로 일치하는 컴포넌트만 렌더링하는 스위치로 루트를 랩합니다.그렇지 않으면 여러 구성요소가 렌더링됩니다.

예를 들어 다음과 같습니다.

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

import App from './app/App';
import Welcome from './app/Welcome';
import NotFound from './app/NotFound';

const Root = () => (
  <Router history={browserHistory}>
    <Switch>
      <Route exact path="/" component={App}/>
      <Route path="/welcome" component={Welcome}/>
      <Route component={NotFound}/>
    </Switch>
  </Router>
);

ReactDOM.render(
  <Root/>,
  document.getElementById('root')
);

React Router의 새로운 버전(현재 2.0.1 사용)에서는 아스타리스크를 경로로 사용하여 모든 '기타 경로'를 라우팅할 수 있습니다.

그러면 다음과 같이 됩니다.

<Route route="/" component={App}>
    <Route path=":area" component={Area}>
        <Route path=":city" component={City} />
        <Route path=":more-stuff" component={MoreStuff} />    
    </Route>
    <Route path="*" component={NotFoundRoute} />
</Route>

이 답변은 리액트 라우터 4에 대한 것입니다.스위치 블록 내의 모든 루트를 랩할 수 있습니다.이러한 루트는 스위치케이스 표현과 동일하게 기능하며 컴포넌트를 최초로 일치하는 루트로 렌더링합니다.예)

<Switch>
      <Route path="/" component={home}/>
      <Route path="/home" component={home}/>
      <Route component={GenericNotFound}/> {/* The Default not found component */}
</Switch>

「 」를 exact

정확하지 않음:

<Route path='/home'
       component = {Home} />

{/* This will also work for cases like https://<domain>/home/anyvalue. */}

정확도:

<Route exact path='/home'
       component = {Home} />

{/* 
     This will NOT work for cases like https://<domain>/home/anyvalue. 
     Only for https://<url>/home and https://<domain>/home/
*/}

라우팅 파라미터를 받아들였는데 잘못된 것으로 판명된 경우 타깃컴포넌트 자체에서 처리할 수 있습니다.예)

<Route exact path='/user/:email'
       render = { (props) => <ProfilePage {...props} user={this.state.user} />} />

ProfilePage.js로 이동합니다.

if(this.props.match.params.email != desiredValue)
{
   <Redirect to="/notFound" component = {GenericNotFound}/>
   //Or you can show some other component here itself.
}

상세한 것에 대하여는, 다음의 코드를 참조해 주세요.

App.js

Profile Page.js

리액트 라우터 v6를 사용하는 사용자용

리다이렉트 컴포넌트가 리액트라우터 버전6에서 삭제되었습니다.위해서react-router-domv6, 단순 교체Redirect와 함께Navigate

최대 v6로의 이행

npm install react-router-dom@6

import {Routes, Route, Navigate } from "react-router-dom";

function App() {
    return (
        <div>
            <Routes>
                <Route path="/404" element={<div>Choose the correct path/div>} />
                <Route path="*" element={<Navigate replace to="/404" />} />
            </Routes>
        </div>
    );
}

설명서에 따르면 리소스가 발견되지 않았는데도 경로가 발견되었습니다.

주의: 이 기능은 리소스를 찾을 수 없는 경우에 사용할 수 없습니다.라우터가 일치하는 경로를 찾을 수 없는 것과 리소스를 찾을 수 없는 유효한 URL 사이에는 차이가 있습니다.url cours/123은 유효한 URL이며 일치하는 루트가 됩니다.따라서 라우팅에 관한 한 이 루트는 "검색"되었습니다.그 후, 데이터를 취득해, 코스 123이 존재하지 않는 것을 알게 되면, 새로운 루트로 이행하고 싶지 않습니다.서버에서와 마찬가지로 URL을 제공하지만 다른 UI를 렌더링합니다(다른 상태 코드 사용).Not Found Route로 전환하려고 하면 안 됩니다.

그래서, 당신은 항상 그 안에 선을 추가할 수 있습니다.Router.run()전에React.render()리소스가 유효한지 확인합니다.컴포넌트에 프로펠러를 전달하거나Handler커스텀 컴포넌트를 사용하여 NotFound 뷰를 표시합니다.

위의 답변은 정답이며 이전 반응 5에 대한 답변입니다.리액트 v6에서는Switch더 이상 존재하지 않습니다.이 솔루션은 react v6용입니다.

import {BrowserRouter as Router, Routes, Route, Link} from "react-router-dom";

...

<Router>
    <ul>
        <li>
            <Link to="t1">component1</Link>
        </li>
        <li>
            <Link to="t2">component2</Link>
        </li>
    </ul>

    <Routes>
        <Route path="/t1" exact element={<Component1/>}/>
        <Route path="/t2" exact element={<Component2/>}/>
        <Route path="*" element={<NotFound/>}/>
    </Routes>

</Router>

방금 예시를 살펴봤습니다만, 제가 올바르게 이해한 것이라면, 404개의 루트를 동적 세그먼트에 추가하려고 하는 것입니다.며칠 전에도 같은 문제가 있었는데 #458과 #1103을 발견했고, 결국 렌더링 기능에서 수작업으로 체크하게 되었습니다.

if (!place) return <NotFound />;

도움이 되길 바래!

리액트 라우터 v6

라이브 데모: 리다이렉트 기본값 또는 리액트라우터를 사용한404 루트

코드 예:

<Router>
  <Routes>
    <Route path="users" element={<Users />} />
    <Route path="posts" element={<Posts />} />
  </Routes>
</Router>

선택한 경로 중 하나로 리다이렉트 및 네비게이트하려면<Navigate>컴포넌트를 설정합니다.다음으로 다음과 같이 빈 루트의 경우를 루트 설정 아래에 선언할 수 있습니다.

<Router>
  <Routes>
    <Route path="users" element={<Users />} />
    <Route path="posts" element={<Posts />} />
    <Route path="" element={<Navigate to="/users" />} />
  </Routes>
</Router>

비슷한 문제가 있었는데*와일드 ID 또는 디폴트스위치 컴포넌트.경로를 정의하지 않고 루트 컴포넌트를 사용할 수 있습니다.

예:

<Switch>
      <Route path="/" component={Root} />
      <Route path="/home" component={Home} />
      <Route component={NotFoundPage} /> 
// Default Component To load If none  of the path matches.
</Switch>

언급URL : https://stackoverflow.com/questions/32128978/react-router-no-not-found-route