Javascript React路由器v4添加子路由

带有

react路由器的大noob

v4和react。我正在尝试设置两个父路由：

/

和

/dashboard

<代码>/将是登录/注册/etc的登录页，/dashboard将是已验证区域。我在让子例程按照文档和这个答案工作时遇到了一些问题

这是非常简单的设置。这是我的

app.js

（路由

/

和

/dashboard

工作正常）：

编辑：我已经删除了我的

LandingPage

组件中的开关，因为它与文档类似，但仍然不好。我也不再使用

匹配

道具：

<Route path="/" component={HomeCard}/>
<Route path="/login" component={LoginPage}/>
<Route path="/signup" component={SignUpPage}/>

组件似乎没有在React-Dev工具中呈现：

---

谢谢你的帮助。谢谢。

当您使用

exact

道具时，只有提供的路径匹配

//仅与路径名“/”匹配

您必须从路由中删除

exact

道具，以便它与

/login

和

/signup

路径名匹配。但是，仅仅这样做是行不通的，因为路由还将匹配

/dashboard

路径名。最好的解决方法是在

---

Wow。你是个天才。我想我没有意识到父路由仍然处于活动状态，即使我在子组件中。谢谢你，伙计。

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;

<Route path="/" component={HomeCard}/>
<Route path="/login" component={LoginPage}/>
<Route path="/signup" component={SignUpPage}/>