陣營潰敗V-4'this.props.match.params` ** **未定義和'staticContext`未定義

Question

我使用

"react": "^15.6.1", 
    "react-dom": "^15.6.1", 
    "react-router": "^4.1.2", 

野兔我擊潰：

<BrowserRouter> 
     <div> 
      <Route exact path='/' component={Layout}></Route> 
      <Route path='/about' name="about" component={About}> 
       <Route path="/:article" component={anotherAbout}></Route> 
      </Route> 
      <Route path='/protfolio' name="protfolio" component={Portfolio}></Route> 
     </div> 
    </BrowserRouter > 

當我打電話{this.props.match.params.article}它給不確定

我的控制檯：this.props

爲什麼staticContext: undefined和我的props.match.params爲空對象。

Answer 1

刪除斜線嵌套路線path=":article"而不是path="/:article"

Answer 2

之前看看這個basic example從反應路由器v4的文檔。

看看const Topics = ({ match }) => (...)，你會在這個組件的底部看到嵌套的路線。這就是你在react-router v4中嵌套路由的方式。如果你解決這個問題，你應該解決問題。

import React from 'react' 
import { 
    BrowserRouter as Router, 
    Route, 
    Link 
} from 'react-router-dom' 

const BasicExample =() => (
    <Router> 
    <div> 
     <ul> 
     <li><Link to="/">Home</Link></li> 
     <li><Link to="/about">About</Link></li> 
     <li><Link to="/topics">Topics</Link></li> 
     </ul> 

     <hr/> 

     <Route exact path="/" component={Home}/> 
     <Route path="/about" component={About}/> 
     <Route path="/topics" component={Topics}/> 
    </div> 
    </Router> 
) 

const Home =() => (
    <div> 
    <h2>Home</h2> 
    </div> 
) 

const About =() => (
    <div> 
    <h2>About</h2> 
    </div> 
) 

const Topics = ({ match }) => (
    <div> 
    <h2>Topics</h2> 
    <ul> 
     <li> 
     <Link to={`${match.url}/rendering`}> 
      Rendering with React 
     </Link> 
     </li> 
     <li> 
     <Link to={`${match.url}/components`}> 
      Components 
     </Link> 
     </li> 
     <li> 
     <Link to={`${match.url}/props-v-state`}> 
      Props v. State 
     </Link> 
     </li> 
    </ul> 

    <Route path={`${match.url}/:topicId`} component={Topic}/> 
    <Route exact path={match.url} render={() => (
     <h3>Please select a topic.</h3> 
    )}/> 
    </div> 
) 

const Topic = ({ match }) => (
    <div> 
    <h3>{match.params.topicId}</h3> 
    </div> 
) 

export default BasicExample