反应路由。渲染问题

Question

我是 React 的新手，正在尝试使用教程添加路由。我有点尴尬，因为所有指南都是针对不同版本的react-routereact，我无法让它为我工作。 我可以使用Menu 更改 URL，但不会出现将在 URL 处呈现的组件。我怀疑history 版本错误。

index.tsx

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { Router, Route, Switch } from 'react-router';
import { createBrowserHistory } from 'history';
import { configureStore } from './store';
import { PaymentReceiptApp } from './containers/PaymentReceiptApp';
import { App } from './containers/App'
import {IndexRoute, browserHistory } from 'react-router-dom'
import { Main } from './containers/Main'

const store = configureStore();
const history = createBrowserHistory();

ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>

       <Route path='/' component={Main} >
       <IndexRoute component={Main} />
        <Route path="receipts" component={PaymentReceiptApp}/>
        <Route path="list" component={App}/>
        </Route>


    </Router>
  </Provider>,
  document.getElementById('root')
);

菜单

import * as React from 'react';
import * as style from './style.css';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { RouteComponentProps } from 'react-router';
import { RootState } from '../../reducers';
import { Link } from 'react-router-dom'

export namespace Main {
  export interface Props extends RouteComponentProps<void> {   
  }

  export interface State {
  }
}

@connect(mapStateToProps, mapDispatchToProps)
export class Main extends React.Component<Main.Props, Main.State> {

  constructor() {
    super();     
  }

  render() {
    return (
        <div className='container'>
            <h1>Menu</h1>
            <ul>
                <li><Link to='/list'>List</Link></li>
                <li><Link to='/receipts'>Receipts</Link></li>
            </ul>
            {this.props.children}
        </div>
    )
  }
}

function mapStateToProps(state: RootState) {
  return {
  };
}

function mapDispatchToProps(dispatch) {
  return {
  };
}

应用

import * as React from 'react';
import * as style from './style.css';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { RouteComponentProps } from 'react-router';
import { RootState } from '../../reducers';

export namespace App {
  export interface Props extends RouteComponentProps<void> {
    fetchPaymentReceipts: FetchData;
  }

  export interface State {
  }
}

@connect(mapStateToProps, mapDispatchToProps)
export class App extends React.Component<App.Props, App.State> {

  constructor() {
    super();

  }

  renderRows = () => {
    const { paymentReceipts } = this.props.fetchPaymentReceipts
    const rows = paymentReceipts.map((receipt) => (
      <tr>
        <td>{receipt.id}</td>
        <td>{receipt.companyInfo}</td>
        <td>{receipt.receiptNum}</td>
        <td>{receipt.receiptSeries}</td>
        <td>{receipt.customerName}</td>
        <td>{receipt.customerSurname}</td>
        <td>{receipt.customerMiddleName}</td>
        <td>{receipt.customerPhone}</td>
        <td>{receipt.services.map((service) =>
          <span>{service} <br/></span>)}</td>
      </tr>));
    return (rows);
  }

  render() {
    return (
      <div className={style.normal}>
        <table className="table table-bordered table-striped">
          <thead className="thead-inverse">
            <tr>
              <th>id</th>
              <th>companyInfo</th>
              <th>receiptNum</th>
              <th>receiptSeries</th>
              <th>customerName</th>
              <th>customerSurname</th>
              <th>customerMiddleName</th>
              <th>customerPhone</th>
              <th>services</th>
            </tr>
          </thead>
          <tbody>
            {this.renderRows()}
          </tbody>
        </table>
      </div>
    );
  }
}

function mapStateToProps(state: RootState) {
  return {
    fetchPaymentReceipts: state.fetchPaymentReceipts
  };
}

function mapDispatchToProps(dispatch) {
  return {
  };
}

package.json

     "devDependencies": {
        "@types/classnames": "2.2.0",
        "@types/history": "4.6.0",
        "@types/node": "8.0.14",
        "@types/react": "15.0.38",
        "@types/react-dom": "15.5.1",
        "@types/react-redux": "4.4.46",
        "@types/react-router": "4.0.14",
        "@types/redux-actions": "1.2.6",

          ................
      },
      "dependencies": {
        "axios": "^0.16.2",
        "classnames": "^2.2.5",
        "react": "^15.6.1",
        "react-dom": "^15.6.1",
        "react-redux": "^5.0.5",
        "react-router": "^4.1.2",
        "react-router-dom": "^4.1.2",
        "redux": "^3.7.2",
        "redux-actions": "^2.2.1",
        "redux-devtools-extension": "^2.13.2",
        "redux-thunk": "^2.2.0"
      }

Answer 1

您使用的是react-router v4。它与 <IndexRoute> 不需要使用。 这段代码应该可以工作。

import { BrowserRouter, Route } from 'react-router-dom';


ReactDOM.render(
      <Provider store={store}>
        <BrowserRouter >
            <Route path='/' component={Main} />
            <Route path="/receipts" component={PaymentReceiptApp} />
            <Route path="/list" component={App} />
        </BrowserRouter>
      </Provider>,
      document.getElementById('root')
    );

Answer 2

你需要修改这个：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
// remove this line
//import { Router, Route, Switch } from 'react-router';
import { createBrowserHistory } from 'history';
import { configureStore } from './store';
import { PaymentReceiptApp } from './containers/PaymentReceiptApp';
import { App } from './containers/App'
// modify this line
import {BrowserRouter, Route, Link } from 'react-router-dom'
import { Main } from './containers/Main'

const store = configureStore();
//const history = createBrowserHistory();

ReactDOM.render(
  <Provider store={store}>
    //<Router history={history}>
      <BrowserRouter>
        <Main />
      </BrowserRouter>
    //</Router>
  </Provider>,
  document.getElementById('root')
);

在Menu:

  render() {
    return (
        <div className='container'>
            <h1>Menu</h1>
            <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to='/list'>List</Link></li>
                <li><Link to='/receipts'>Receipts</Link></li>
            </ul>

            <Route path="/" exact render={() => <div>This is home</div>} />
            <Route path="/receipts" component={PaymentReceiptApp}/>
            <Route path="/list" component={App}/>
        </div>
    )
  }