リアクションルータ-4のクリックのナビゲーション

Question

私は正しくないことを理解できません。 助けてください。

は、私はここに同様の質問を見

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 
 
};

Answer 1

問題は成分Mことですルータが最初のルートと一致して停止することを通知します。ルーターの順序を変更して、より具体的なものが上になるようにしてください。