我正在使用反應創建Web應用程序，目前我在導航頁面時遇到問題。以下是詳細的描述。希望有人能幫助我。使用反應時的URL路由問題

我的組件（任務）是這樣的（simplyfied）

class Tasks extends Component { 

    constructor(props) { 
     super(props); 
     this.type = props.match.params.type; 
    } 


    render(){ 
     return (<h1>{this.type} </h1>); 
    } 
}

而且如下

: 
: 
import {BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom' 
: 

    <Route path={"/tasks/:type/"} component={Tasks} />

最後我用我的反應路由器-DOM做路由從一個單獨的組件從我的導航菜單中的一個通過設置網址來調用此路由組件

import MenuItem from 'material-ui/Menu/MenuItem'; 


      <MenuItem> 
       <Link name="application_creation" to="/tasks/type1">Type One</Link> 
      </MenuItem> 
      <MenuItem> 
       <Link name="application_creation" to="/tasks/type2">Type Two</Link> 
      </MenuItem>

在這個實現中，當我從導航菜單中選擇一個url時，它不能按預期工作。當選擇一個，然後選擇另一個時，它不按預期導航。如果我在瀏覽器上輸入網址或刷新頁面，它會指向正確的頁面（其他網址）。

希望我明確提出了我的問題：D。有人能指導我如何解決這個問題的正確方向嗎？

感謝

來源

2017-08-21 Chamila Adhikarinayake

我會說'HashRouter'而不是'BrowserRouter' - 它會簡化開發過程，因爲它的工作方式與您所期望的一樣。一旦你開發你的應用程序，你可以考慮重新考慮'BrowserRouter'。 –

'return（

{this.type}

）;' - 如果'props.type'發生變化，這將不會更新，因爲您只在構造函數 –

中同步它，以迴應@DimitarChristoff所說的內容。根本不需要使用班級 – azium

你應該有路由/任務/ type1和/任務/在你的路由定義TYPE2。你可以設計這樣的事情：

//Assume MainRoutes.js : which would have your main app navigation routes. 
export default function MainRoutes(props) { 
    return(
    <Router> 
     <App> // Your Main App Component 
      <Switch> 
       <Route path='/' component={SomeHomeComponent}/> 
       <Route path='/tasks' component={TaskRoutes}> 
       <Route component={()=>(<NotFound/>)}/> 
      </Switch> 
     </App> 
    </Router> 
); 
} 

//TaskRoutes.js Component 
. 
. 
. 
<TaskLayout> 
    <Switch> 
     <Route path='/tasks/type1' component={Tasks}/> 
     <Route path='/tasks/type2' component={Tasks}/> 
    </Switch> 
</TaskLayout> 


//TaskLayout.js Component : where you can render your menu items 
. 
. 
. 
<MenuItem> 
    <Link name="application_creation" to="/tasks/type1">Type One</Link> 
</MenuItem> 
<MenuItem> 
    <Link name="application_creation" to="/tasks/type2">Type Two</Link> 
</MenuItem> 
. 
. 
.

也許在你的情況，你要根據類型重新渲染成分，這樣的事情：

class Tasks extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
     type: '' 
     } 
    } 

    componentDidMount() { 
     this.setState({ 
     type: this.props.match.params.type 
     }); 
    } 

    render(){ 
     return (<h1>{this.state.type} </h1>); 
    } 
}

更新：

當組件實例第一次呈現爲DOM時，React將調用comp onentDidMount（）如果已定義。這是您第一次訪問DOM和子文件。現在組件實例已呈現並處於活動狀態。它將存活並更新，直到它被卸載。

如果您在具有相同組件和不同參數的路由之間切換，您的原始組件不會卸載或重新裝入，ComponentDidMount將被調用一次。但取而代之的是收到新的道具。因此，您可以使用componentWillReceiveProps（newProps）函數並查找newProps.params。這是預期的行爲。現在，這取決於你想如何去實施路線。如果這是您想要的，您可以爲Type1和Type2使用不同的組件。

來源

2017-08-21 15:27:47 Dev

@Chamila Adhikarinayake：這是否解決了您的目的？ – Dev

感謝您提供解決方案。但它並沒有解決我的問題。我添加了一些控制檯日誌，發現每次都只執行render（）方法，但componentDidMount（）只能執行一次路由。任何建議加載這兩個組件兩次？（做刷新工程btw） –

@ChamilaAdhikarinayake，請看看更新。 – Dev

使用反應時的URL路由問題

{this.type}

回答

相關問題