2017-05-08 68 views
0

下面是部分在哪裏發生問題的代碼:不能得到陣營路由器的4環節的工作

import React, { Component } from 'react'; 
    import { connect } from 'react-redux'; 
    import { Redirect, Link, withRouter } from 'react-router-dom' 
    import * as actions from 'actions'; 

    class DashBoard extends Component { 
     constructor(props) { 
      super(props); 
     } 
     componentDidMount() { 
      this.props.dispatch(actions.deleteItems()); 
      this.props.dispatch(actions.fetchItems()); 
     } 
     render() { 
      let { items } = this.props; 
      let key = 0; 
      let renderItems =() => { 
       if (!items) { 
        return 
       } 
       return items.map((item) => { 
        let { action, author } = item.logs[item.logs.length - 1]; 
        return (
         <div className="dashboard-item"> 
          <h3>{item.name}</h3> 
          <div className="info-container"> 
           <span>Amount: {item.number}</span> 
           <span>{item.state}</span> 
          </div> 
          <span className="created">{`${action} by ${author}`}</span> 
          <span className="last-log">{`Last log: ${item.logs[0].action} by ${item.logs[0].author}`}</span> 
          <div className="buttons"> 
           <Link to='/'>Edit</Link> 
           <Link to={`/items/${item.id}/edit`}>Delete</Link> 
          </div> 
         </div> 
        ); 
       }) 
      } 

      if (this.props.auth.token) { 
       return (
        <div className="dashboard-container"> 
         {renderItems()} 
        </div> 
       ); 
      } else { 
       this.props.dispatch(actions.setError('You must log in.')) 
       return <Redirect to='/' /> 
      } 
     } 
    } 

    export default withRouter(connect(
     (state) => { 
      return state; 
     } 

)(DashBoard)); 

我得到重定向工作,但點擊鏈接只是改變的URL在瀏覽器,其實我還是看到我的儀表板組件。如果我輸入localhost:3000/items/隨機ID /編輯我得到正確的結果。創建和點擊一個鏈接什麼也不做。網址欄除外,沒有任何更改。用路由器破解似乎不適合我。然而,直接輸入url的作品。我怎樣才能解決這個問題?

編輯:路由定義

import React, { Component } from 'react'; 
import { Route, Link } from 'react-router-dom'; 
import { connect } from 'react-redux'; 
import Home from 'Home'; 
import Dashboard from 'Dashboard'; 
import EditItemForm from 'EditItemForm'; 
import NewItemForm from 'NewItemForm'; 

export class Main extends Component { 
    constructor(props) { 
     super(props); 
    } 
    render() { 
     let { auth, error } = this.props; 
     let renderError =() => { 
      if (error) { 
       return (
        <div className="error"> 
         <p>{error}</p> 
        </div> 
       ) 
      } else { 
       return (<div></div>) 
      } 
     } 
     return (
      <div> 
       {renderError()} 
       <Route exact={true} path="/" component={Home} /> 
       <Route path="/dashboard" component={Dashboard} /> 
       <Route path="/items/:id/edit" component={EditItemForm} /> 
       <Route path="/items/new" component={NewItemForm}/> 
      </div> 
     ); 
    } 
} 

export default connect(
    (state) => { 
     return state; 
    } 
)(Main); 

編輯#2:想通了,點擊一個鏈接,即使並沒有改變路徑的路徑>定位>路徑,如果考慮作出反應DevTools

+0

您是否檢查是否有不止一條路線與URL匹配?如果你來自React-Router v3.x,你必須改變url的匹配方式。 –

+0

你使用BrowserRouter還是路由器? – Syberic

+0

@Syberic,我編輯我的職務,並添加所有路由都定義 –

回答

0

所以我只是回滾到v3。謝謝你們的幫助!

1

我認爲你可能需要在一個組件的所有路由上使用一個開關,因爲即使我之前也有過類似的問題。然而這在反應路由器v3中起作用。希望這有助於ü:)歡呼

React Router 4

React Router v4 Unofficial Migration Guide

+0

在新版本的React路由器沒有匹配 –

+0

@RomanSarder謝謝你,我只是錯過了第4版的標籤。 –

+0

@RomanSarder請讓我們知道如果你的問題得到解決:) –

1

在我看來,有什麼錯相對於使用的代碼陣營,你這裏顯示路由器。

我建議您簡化應用程序,您發佈主路由器組件,因爲你看到你的儀表盤應該是罰款,但它可以幫助。

嘗試做一個假字問好路線,做您的信息中心過渡到有..

通常,你可以在這裏最有可能的是,阻止路由的更新嵌套的組件。通常在每個連接的組件中放置路由器都可以工作。或者,您可以嘗試在與路由嵌套的每個組件中添加路由器。

我覺得應該有一個優雅爲什麼要解決這個問題,但也許這可以幫助你知道這個問題的來源。

然後嘗試檢查您的第三方庫是否支持RR4。 祝你好運!