Reactjs 在react-router-v4中嵌套交换机组件和全局NoMatch组件

我的应用程序目前分为3个部分：

• 前端
• 管理
• 错误

前端、管理和错误组件有自己的样式

前端和管理组件也有自己的交换机组件来导航

我面临的问题是，如果没有重定向组件，我无法访问NoMatch路径。但当我这样做时，我在浏览器URL中丢失了错误的路径

当内部交换机组件没有在其父交换机组件中持续搜索的匹配路由时，是否有可能

然后我就可以点击NoMatch路线，并在URL中保留错误的路径

编辑：我用最终解决方案更新了下面的答案，该解决方案工作正常。

const Frontend = (props) => {
  const { match } = props;
  return (<div>
    <h1>Frontend</h1>
    <p><Link to={match.path}>Home</Link></p>
    <p><Link to={`${match.path}users`}>Users</Link></p>
    <p><Link to="/admin">Admin</Link></p>
    <p><Link to={`${match.path}not-found-page`}>404</Link></p>
    <hr />
    <Switch>
      <Route exact path={match.path} component={Home} />
      <Route path={`${match.path}users`} component={Users} />
      {
      // Workaround
      }
      <Redirect to="/error" />
    </Switch>
  </div>);
};

const Admin = (props) => {
  const { match } = props;
  return (<div>
    <h1>Admin</h1>
    <p><Link to={match.path}>Dashboard</Link></p>
    <p><Link to={`${match.path}/users`}>Edit Users</Link></p>
    <p><Link to="/">Frontend</Link></p>
    <p><Link to={`${match.path}/not-found-page`}>404</Link></p>
    <hr />
    <Switch>
      <Route exact path={match.path} component={Home} />
      <Route path={`${match.path}/users`} component={Users} />
      {
      // Workaround
      }
      <Redirect to="/error" />
    </Switch>
  </div>);
};

const ErrorPage = () =>
  <div>
    <h1>404 not found</h1>
    <p><Link to="/">Home</Link></p>
  </div>;

const App = () => (
  <div>
    <AddressBar />
    <Switch>
      <Route path="/error" component={ErrorPage} />
      <Route path="/admin" component={Admin} />
      <Route path="/" component={Frontend} />
      {
      // this should render the error page
      // instead of redirecting to /error
      }
      <Route component={ErrorPage} />
    </Switch>
  </div>
);

const前端=（道具）=>{
常量{match}=props；
返回(
前端
家

使用者

管理员

404


{
//变通办法
}
);
};
常量管理=（道具）=>{
常量{match}=props；
返回(
管理
仪表板

编辑用户

前端

404


{
//变通办法
}
);
};
常量错误页=（）=>
404找不到
家

;
常量应用=（）=>(
{
//这将显示错误页面
//而不是重定向到/error
}
);

所有子组件路由都被包装在父组件中（应用程序

组件中的
开关），实际上子组件中没有开关

只需删除child switch.component，并将404放在
中，这是此类需求的最终解决方案。
为了使它工作，我们使用位置的状态属性。在内部路由中的重定向上，我们将状态设置为
error:true
。
在GlobalErrorSwitch上，我们检查状态并呈现错误组件

import React, { Component } from 'react';
import { Switch, Route, Redirect, Link } from 'react-router-dom';

const Home = () => <div><h1>Home</h1></div>;
const User = () => <div><h1>User</h1></div>;
const Error = () => <div><h1>Error</h1></div>

const Frontend = props => {
  console.log('Frontend');
  return (
    <div>
      <h2>Frontend</h2>
      <p><Link to="/">Root</Link></p>
      <p><Link to="/user">User</Link></p>
      <p><Link to="/admin">Backend</Link></p>
      <p><Link to="/the-route-is-swiggity-swoute">Swiggity swooty</Link></p>
      <Switch>
        <Route exact path='/' component={Home}/>
        <Route path='/user' component={User}/>
        <Redirect to={{
          state: { error: true }
        }} />
      </Switch>
      <footer>Bottom</footer>
    </div>
  );
}

const Backend = props => {
  console.log('Backend');
  return (
    <div>
      <h2>Backend</h2>
      <p><Link to="/admin">Root</Link></p>
      <p><Link to="/admin/user">User</Link></p>
      <p><Link to="/">Frontend</Link></p>
      <p><Link to="/admin/the-route-is-swiggity-swoute">Swiggity swooty</Link></p>
      <Switch>
        <Route exact path='/admin' component={Home}/>
        <Route path='/admin/user' component={User}/>
        <Redirect to={{
          state: { error: true }
        }} />
      </Switch>
      <footer>Bottom</footer>
    </div>
  );
}

class GlobalErrorSwitch extends Component {
  previousLocation = this.props.location

  componentWillUpdate(nextProps) {
    const { location } = this.props;

    if (nextProps.history.action !== 'POP'
      && (!location.state || !location.state.error)) {
        this.previousLocation = this.props.location
    };
  }

  render() {
    const { location } = this.props;
    const isError = !!(
      location.state &&
      location.state.error &&
      this.previousLocation !== location // not initial render
    )

    return (
      <div>
        {          
          isError
          ? <Route component={Error} />
          : <Switch location={isError ? this.previousLocation : location}>
              <Route path="/admin" component={Backend} />
              <Route path="/" component={Frontend} />
            </Switch>}
      </div>
    )
  }
}

class App extends Component {
  render() {
    return <Route component={GlobalErrorSwitch} />
  }
}

export default App;

import React，{Component}来自'React'；
从“react router dom”导入{交换机、路由、重定向、链接}；
常量Home=（）=>Home；
const User=（）=>User；
常量错误=（）=>错误
const Frontend=props=>{
console.log（“前端”）；
返回(
前端
根

使用者

后端

Swiggity swooty

底部
);
}
const Backend=props=>{
log（'Backend'）；
返回(
后端
根

使用者

前端

Swiggity swooty

底部
);
}
类GlobalErrorSwitch扩展组件{
previousLocation=this.props.location
组件将更新（下一步）{
const{location}=this.props；
如果（nextrops.history.action！=='POP'
&&（！location.state | |！location.state.error））{
this.previousLocation=this.props.location
};
}
render（）{
const{location}=this.props；
常量isError=(
位置、状态&&
location.state.error&&
this.previousLocation！==位置//不是初始渲染
)
返回(
{          
伊瑟罗
? 
: 
}
)
}
}
类应用程序扩展组件{
render（）{
返回
}
}
导出默认应用程序；
你是如何引入app、admin等的？如果这是你的意思，那么app是主要的react组件。问题似乎是你应该在app.js中的索引路径中添加
精确的
，
。问题是它正在捕获所有请求，因此您的错误路由永远不会呈现。这是我的第一个解决方案。但是，当你将
exact
添加到第一条
路线时，内部的
路线将无法访问。当我删除应用程序中的组件时，它也不起作用。你可以发布一个代码笔来显示不起作用的示例吗？查看你的更新，你似乎已经按照我的回答删除了开关（这对你有用）。你的新问题，关于一个前导斜杠不起作用是一个新的和不相关的问题…起初并不是因为/是我问题的一部分。谢谢。这是一个很好的解决方案，但我想你不需要以前的位置逻辑。我可以确认这种方法很有效。（“react”：“^16.7.0”，“react router”：“^4.3.1”）很高兴听到。