React-Router v4添加子路由

大型noob與react-router v4和一般反應。我正在嘗試設置兩條父路線：/和/dashboard。 /將是登錄頁面登錄/註冊/等和/儀表板將是認證區域。我有一些麻煩讓子菜單按照文檔工作，這是這樣回答here React-Router v4添加子路由

這是非常簡單的設置。這是我的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}/>

看起來並不在所呈現的組分反應的開發工具：

讚賞任何幫助。謝謝。

來源

2017-04-12 coolboyjules

當您使用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>

來源

2017-04-13 13:50:19

之間切換兩條路線的順序。你是個天才。我想我沒有意識到，即使我在子組件中，父路由仍然是活動的。非常感謝。 – coolboyjules

React-Router v4添加子路由

回答

相關問題