![](/img/trans.png)
[英]React-Router-Dom v5 - Switch doesn't work with mapping array of Route components
[英]Route doesn't work in react-router-dom in a nested structure
我想建立一个带有路由的认证页面:
/auth -> show auth status
/auth/signin -> Sign in form
/auth/signup -> Sign up form
这是我的应用程序中的组件
应用程序.js
function App() {
return (
<BrowserRouter>
<div className="App">
<Switch>
<Route exact path="/auth" component={AuthPage} />
<Route path="/notebook" component={SiderDemo} />
</Switch>
</div>
</BrowserRouter>
);
}
AuthPage.js
function AuthPage() {
// get auth status
const auth = seSelector(state => state.firebase.auth);
let { path, url } = useRouteMatch();
return (
<Layout>
<Layout.Header>
<Link to={`${url}/signin`}>Sign in</Link>
<Link to={`${url}/signup`}>Sign up</Link>
</Layout.Header>
<Layout.Content>
<Switch>
<Route path={`${path}/signin`}>
<SigninForm />
</Route>
<Route path={`${path}/signup`}>
<SignupForm />
</Route>
<Route exact path={path}>
<p>{isEmpty(auth) ? "Not logged in " : auth.uid}</p>
</Route>
</Switch>
</Layout.Content>
<Layout.Footer>Footer</Layout.Footer>
</Layout>
)
}
虽然应用程序呈现/auth
但当它进入auth/signin
和auth/signup
时,它什么也得不到。 有人可以帮忙解决吗?
react-router-dom 版本:^5.2.0
您的第二个Switch
呈现在AuthPage
组件之上。 因为AuthPage
仅在 path 完全是auth
时才会呈现,所以在auth/signin
signin 不会呈现它,因此它的子路由也不会呈现。 从auth
路由声明中删除exact
的
<Route path="/auth" component={AuthPage} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.