反应路由。问题与渲染
问题描述:
我是React新手,并尝试添加与教程路由。我有点尴尬,因为所有的指南都是针对不同的版本react-route
react
,我无法为它工作。 我可以用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"
}
答
您使用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')
);
答
您需要修改此:
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>
)
}
看起来你感到困惑。您安装的反应路由器是反应路由器4,但您的代码使用反应路由器3的代码。 – Win