在反应路由器 v4 中找不到用于嵌套路由的 404

Gue*_*ver 5 reactjs react-router-dom

在我的应用程序中,我有路线

  • /认证/登录
  • /认证/注册

并将页面中的公共部分放置在Auth.jsx, 使用 Router 来/auth/login/auth/regster

/auth/login/xxx也会匹配/auth/login

唯一的解决办法,以解决办法是增加exactSwitchError Route无处不在

是否有其他解决方案可以避免编写过多的Error Routes?

代码如下...

应用程序.jsx

import React from 'react'
import { render } from 'react-dom'
import { Route, Switch } from 'react-router-dom'

import Error from './Error'
import Home from './Home/Home'
import Auth from './Auth/Auth'

export default class App extends React.Component {
  render () {
    return (
      <Switch>
        <Route exact path="/" component={Home}/>
        <Route path="/auth" component={Auth}/>
        <Route component={Error}/>
      </Switch>
    )
  }
}
Run Code Online (Sandbox Code Playgroud)

身份验证.jsx

import React from 'react'
import { render } from 'react-dom'
import { Route, Link } from 'react-router-dom'

import Login from './Login'
import Register from './Register'

export default class Auth extends React.Component {
  render () {
    return (
      <div>
        <div>Auth works</div>
        <div>
          <Link to={`${this.props.match.url}/login`}>LOGIN</Link>
          <Link to={`${this.props.match.url}/register`}>REGISTER</Link>
        </div>
        <Route exact path={`${this.props.match.url}/login`} component={Login}/>
        <Route exact path={`${this.props.match.url}/register`} component={Register}/>
      </div>
    );
  }
}
Run Code Online (Sandbox Code Playgroud)