Question

我无法理解我做错了什么。请帮忙。

我需要通过点击反应路线4中的另一条路线进行导航。

我在这里看到了类似的问题：How to get history on react-router v4?

并在正确答案中写了所有内容，但React不会渲染我的组件。

贝娄是我的代码：

＆＃13;

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

＆＃13;

// history.js
import { createBrowserHistory } from 'history'

export default createBrowserHistory({
  /* pass a configuration object here if needed */
});

＆＃13;

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

＆＃13;

单击后路径正确但组件未呈现

＆＃13;

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

＆＃13;

已编辑：

＆＃13;

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

＆＃13;

Answer 1

问题是该组件意味着路由器将匹配第一个路由并停止。尝试更改路由器的顺序，以便更具体的路由器。

react-router-4中的onClick导航

1 个答案: