React-Router v4 하위 경로 추가

Question

큰 멍청한 놈 react-router v4와 일반적으로 반응합니다. 두 개의 상위 경로 (/ 및 /dashboard)를 설정하려고합니다. /은 로그인/가입/기타 방문 페이지이며/대시 보드는 인증 된 영역이됩니다. 난 문제가 조금있어 문서 및이 그래서 대답을 따라 서브 루트 작업을 받고 있어요 here

그것은 매우 간단합니다.

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을 작동하지 않는 하위 경로를 가지고 여기 내 app.js (루트 / 및 /dashboard 잘 작동)입니다. 내가 뭔가 잘못 :

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; 

편집을하고 있어요 직감을 가지고는 문서 here하지만 여전히 좋은 비슷합니다 나는 내 LandingPage 구성 요소의 스위치를 제거했습니다. 나는 또한 더 이상 match 소품을 사용하지 해요 :

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

이 글은 렌더링되지 않는 구성 요소처럼 보인다는 개발 도구 반응 :

감사 어떤 도움. 감사.

Answer 1

exact 소품을 사용하면 제공된 경로 만 일치합니다.

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

당신은 그것이 /login 및 /signup 경로 이름과 일치하기 위해 경로에서 exact 소품을 제거해야합니다. 그러나이 작업은 경로가 /dashboard 경로 이름과 일치하기 때문에 작동하지 않습니다. 이 문제를 해결하는 가장 좋은 방법은 두 경로의 순서를 전환하는 것입니다. <Switch>

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