リアクションルーティング。レンダリングの問題

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

のApp

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

パック

 "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

age.jsonあなたは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> 
    ) 
    }