Javascript 反应路由器：找不到路由？

考虑以下几点：

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>
];

var批准=[
,
,
];

我有一个应用程序模板，一个HeaderTemplate，和一组具有相同处理程序的参数化路由（在应用程序模板中）。我希望能够在找不到东西的情况下为404条线路提供服务。例如，/CA/SanFranciscoz应按区域查找和处理，而/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');
    });
});

[“”，“/”，“/withheader'，“/SanFranciscoz'，”/ca'，“/ca'，“/ca/SanFrancisco'，”/ca/SanFrancisco/LowerHaight'，“/ca/SanFrancisco/LowerHaight/condo'].forEach（函数（路径）{
运行（批准、路径、函数（处理程序、状态）{
var output=React.renderToString（）；
console.log（输出“\n”）；
});
});

问题是/SanFranciscoz总是由区域页面处理，但我希望它是404。此外，如果我将NotFoundRoute添加到第一个路由配置中，则所有区域页面都将显示404

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

,

我做错了什么

这里有一个要点可以下载并试用

---

我刚刚快速查看了您的示例，但如果我理解正确，您将尝试向动态段添加404条路由。几天前，我发现了同样的问题，并在渲染功能中进行了手动检查：

if (!place) return <NotFound />;

如果（！place）返回；

希望有帮助

根据，找到了路线，即使资源没有找到

注意：这不适用于找不到资源的情况。路由器找不到匹配路径和导致找不到资源的有效URL之间存在差异。url courses/123是一个有效的url，并产生一个匹配的路由，因此就路由而言，它是“找到”的。然后，如果我们获取一些数据并发现课程123不存在，我们就不想转换到新的路线。就像在服务器上一样，继续提供url，但呈现不同的UI（并使用不同的状态代码）。您不应该尝试转换到NotFoundRoute

---

因此，您可以在

React.render（）

之前在

Router.run（）

中添加一行代码，以检查资源是否有效。只需向组件传递一个道具，或使用自定义道具覆盖

处理程序
组件，以显示NotFound视图。
使用新版本的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>

在react router 1.0.0中删除了DefaultRoute和NotFoundRoute

我想强调的是，带星号的默认路由必须是当前层次结构级别中的最后一个。否则，它将覆盖树中出现在它后面的所有其他路由，因为它是第一个路由，并且匹配每个路径

用于反应路由器1、2和3

如果要显示404，请保留路径（与NotFoundRoute功能相同）



如果要显示404页面，但更改url（功能与DefaultRoute相同）



具有多个级别的示例：

<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）



顺序很重要
在较新版本的react路由器中，只呈现第一个匹配的组件。否则，您将看到渲染的多个组件

例如：

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”导入React；
从“react dom”导入react dom；
进口{
BrowserRouter作为路由器，
路线,，
浏览历史，
转换
}从“反应路由器dom”；
从“./App/App”导入应用程序；
从“/app/Welcome”导入欢迎；
从“/app/NotFound”导入NotFound；
常量根=（）=>(
);
ReactDOM.render(
,
document.getElementById（'root'））
);
此答案适用于react-router-4。
可以将所有管线包装在开关块中，其功能与开关大小写表达式类似，并使用第一条匹配管线渲染组件。（例如）

准确地说：

<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/
*/}


{/* 
这不适用于像这样的情况https:///home/anyvalue. 
只为https:///home 及https:///home/
*/}

现在，如果您正在接受路由参数，并且结果不正确，那么您可以在目标组件本身中处理它。（例如）

}/>

现在进入ProfilePage.js

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

if（this.props.match.params.email！=desiredValue）
{
//或者，您可以在这里显示其他组件本身。
}

有关更多详细信息，请查看以下代码：


谢谢@jorn，我想你是对的，这似乎只能从组件中寻址level@Jorn-所以您说uri需要使用一些脚本进行本地验证，然后返回
。是吗？谢谢@brad，你说得对，你必须在router.runNotFound被弃用之前用组件处理这个问题，或者重写处理程序。现在使用
或
作为最后一个要匹配的子路由，我相信你不需要在NotFound路由上包含
路径=“*”
。省略
路径
将导致路径始终匹配。对于迟到的人，@chipit24是正确的，为了避免混淆，只需完全忽略未知路径的
路径
。如果你有redux应用程序，你该怎么办：
在此语法中：
const routes={component:Main，childRoutes:[{path:'/'，component:Home}，]，indexRoute:{component:Main，}，}；
如果要为404组件设置道具，请使用此代码
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')
);

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

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

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