react-router
使用v4 和 React 的大菜鸟。我正在尝试设置两个父路由:/
和/dashboard
. /
将是登录/注册/等的登录页面,/dashboard 将是经过身份验证的区域。我在按照文档和这个 SO answer here让子路由工作时遇到了一些麻烦
这是非常简单的设置。这是我的app.js
(路线/
和/dashboard
工作正常):
import React from 'react'
import {Route, BrowserRouter, Switch} from 'react-router-dom'
import LandingPage from "./components/landing/LandingPage";
import ETFApp from "./components/dashboard/ETFApp";
class App extends React.Component {
render() {
return (
<BrowserRouter>
<Switch>
<Route path="/" exact component={LandingPage}/>
<Route path="/dashboard" component={ETFApp}/>
</Switch>
</BrowserRouter>
)
}
}
export default App;
但是我的LandingPage
组件的子路由似乎不起作用,尤其是/signup
和/login
. 我有预感我做错了什么。:
import React, {PropTypes} from 'react';
import {Link, Route} from 'react-router-dom';
import {ToolbarGroup, ToolbarTitle, RaisedButton, Toolbar} from 'material-ui'
import HomeCard from "./HomeCard";
import LoginPage from "../../containers/LoginPage";
import SignUpPage from "../../containers/SignUpPage";
const LandingPage = ({match}) => {
return (
<div>
<Toolbar>
<ToolbarGroup>
<Link to="/">
<ToolbarTitle text="ETFly"/>
</Link>
</ToolbarGroup>
<ToolbarGroup>
<RaisedButton label="Login" primary={true} containerElement={<Link to="/login">Log in</Link>}/>
<RaisedButton label="Sign up" primary={true} containerElement={<Link to="/signup">Sign up</Link>}/>
</ToolbarGroup>
</Toolbar>
<Route path={match.url} exact component={HomeCard}/>
<Route path={`${match.url}/login`} component={LoginPage}/>
<Route path={`${match.url}/signup`} component={SignUpPage}/>
</div>
);
};
LandingPage.propTypes = {
match: PropTypes.object.isRequired
}
export default LandingPage;
编辑:我已经删除了LandingPage
组件中的开关,因为它与此处的文档相似,但仍然没有好处。我也不再使用match
道具:
<Route path="/" component={HomeCard}/>
<Route path="/login" component={LoginPage}/>
<Route path="/signup" component={SignUpPage}/>
看起来组件没有在 React Dev Tools 中呈现:
任何帮助表示赞赏。谢谢。