React-Router v4 添加子路由

Question

大菜鸟 react-router v4 和一般的 React。我正在尝试设置两条父路由：/ 和 /dashboard。 / 将是 login/signup/etc 的登录页面，/dashboard 将是经过身份验证的区域。我在按照文档和这个 SO 答案

让子路径工作时遇到了一些麻烦

设置非常简单。这是我的 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 组件中的开关，因为它与文档 here 类似，但仍然不好。我也不再使用 match 道具：

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

看起来组件没有在 React Dev Tools 中呈现：

感谢任何帮助。谢谢。

Answer 1

当您使用 exact 属性时，只有提供的路径会匹配。

<Route exact path='/' component={LandingPage} />
// only matches the pathname "/"

您必须从路由中删除 exact 属性才能使其匹配 /login 和 /signup 路径名。然而，仅仅这样做是行不通的，因为路由也会匹配 /dashboard 路径名。解决这个问题的最好方法是在 <Switch>

中调换两条路线的顺序

<Switch>
  <Route path='/dashboard' component={ETFApp}/>
  <Route path='/' component={LandingPage}/>
</Switch>

React-Router v4 添加子路由

React-Router v4 adding sub routes

javascript

reactjs

react-router

material-ui

react-router-v4