onClick導航在react-router-4

我不明白我做了什麼不正確。請幫忙。onClick導航在react-router-4

我需要通過點擊導航到反應路線另一條路線4.

我看到了類似的問題在這裏：How to get history on react-router v4?

，並作出一切爲正確的答案寫，他們的反應不會呈現我的組件。

貝婁是我的代碼：

import history from './history'; 
 

 
const store = createStore(reducer, composeWithDevTools(applyMiddleware())); 
 
ReactDOM.render(
 
    <Provider store={store}> 
 
    <Router history={history}> 
 
     <App /> 
 
    </Router> 
 
    </Provider>, 
 
document.getElementById('root'));

// history.js 
 
import { createBrowserHistory } from 'history' 
 

 
export default createBrowserHistory({ 
 
    /* pass a configuration object here if needed */ 
 
});

import history from './history'; 
 
    
 
    /** 
 
    * onClick function for navigation 
 
    */ 
 
    onNavigateTask = (id) => { 
 
    return() => { 
 
     history.push(`/tasks/${id}`); 
 
    }; 
 
    }

路徑後點擊正確的，但分量不呈現

//route for component 
 

 
<Route 
 
      path='/task:id' 
 
      render={() => { 
 
       return (
 
       <CurrentTask 
 
        results={results} 
 
       />); 
 
      }} 
 
      />

編輯：

/* eslint-disable no-undef */ 
 
import React from 'react'; 
 
import PropTypes from 'prop-types'; 
 
import { Switch, Route } from 'react-router'; 
 
import TimeTracker from './TimeTracker'; 
 
import CurrentTask from './CurrentTask'; 
 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
 
import { connect } from 'react-redux'; 
 
import { initStorage, setStoreItem } from './helpers/localStorage'; 
 
import { updateStartTime, updateCurrentTask, updatePickedDay, updateResults } from './actions/TimeTracker'; 
 

 
class App extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    initStorage('timeData'); 
 
    } 
 

 
    render() { 
 
    const { 
 
     startTime, 
 
     currentTask, 
 
     firstPickedDay, 
 
     secondPickedDay, 
 
     results, 
 
     onSetStartTime, 
 
     onSetCurrentTask, 
 
     onSetPickedDay, 
 
     onSetResults} = this.props; 
 
    return (
 
     <MuiThemeProvider> 
 
     <Switch> 
 
      <Route 
 
      exact path='/' 
 
      render={() => { 
 
       return (
 
       <TimeTracker 
 
        results={results} 
 
        startTime={startTime} 
 
        currentTask={currentTask} 
 
        firstPickedDay={firstPickedDay} 
 
        secondPickedDay={secondPickedDay} 
 
        onSetStartTime={onSetStartTime} 
 
        onSetCurrentTask={onSetCurrentTask} 
 
        onSetPickedDay={onSetPickedDay} 
 
        onSetResults={onSetResults} 
 
        setStoreItem={setStoreItem} /> 
 
      ); 
 
      }} 
 
      /> 
 
      <Route 
 
      path='/task:id' 
 
      render={() => { 
 
       return (
 
       <CurrentTask 
 
        results={results} 
 
       />); 
 
      }} 
 
      /> 
 
     </Switch> 
 
     </MuiThemeProvider> 
 
    ); 
 
    } 
 
} 
 

 
export default connect(
 
    state => ({ 
 
    startTime: state.startTime, 
 
    currentTask: state.currentTask, 
 
    firstPickedDay: state.firstPickedDay, 
 
    secondPickedDay: state.secondPickedDay, 
 
    results: state.results 
 
    }), 
 
    dispatch => ({ 
 
    onSetStartTime: updateStartTime(dispatch), 
 
    onSetCurrentTask: updateCurrentTask(dispatch), 
 
    onSetPickedDay: updatePickedDay(dispatch), 
 
    onSetResults: updateResults(dispatch) 
 
    }) 
 
)(App); 
 

 
App.propTypes = { 
 
    startTime: PropTypes.number.isRequired, 
 
    currentTask: PropTypes.string.isRequired, 
 
    firstPickedDay: PropTypes.number.isRequired, 
 
    secondPickedDay: PropTypes.number.isRequired, 
 
    results: PropTypes.array.isRequired, 
 
    onSetStartTime: PropTypes.func.isRequired, 
 
    onSetCurrentTask: PropTypes.func.isRequired, 
 
    onSetPickedDay: PropTypes.func.isRequired, 
 
    onSetResults: PropTypes.func.isRequired 
 
};

來源

2017-08-15 a.kozubenko

你可以發佈你的路由定義的其餘部分。也許它首先在組件內匹配不同的路線？ – aherriot

完成後，我編輯了說明 –

的問題是，成分M意味着路由器將匹配第一條路線並停止。嘗試更改路由器的順序，以便更具體的路由器處於最佳狀態。

來源

2017-08-15 14:21:54 aherriot

onClick導航在react-router-4

回答

相關問題