反应路由。问题与渲染

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

包age.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。它有点不同于< 4. <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> 
    ) 
    }