Gue*_*ver 5 reactjs react-router-dom
在我的应用程序中,我有路线
并将页面中的公共部分放置在Auth.jsx, 使用 Router 来/auth/login和/auth/regster
但/auth/login/xxx也会匹配/auth/login
唯一的解决办法,以解决办法是增加exact,Switch而Error 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)
| 归档时间: |
|
| 查看次数: |
4340 次 |
| 最近记录: |