下面是部分在哪裏發生問題的代碼:不能得到陣營路由器的4環節的工作
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Redirect, Link, withRouter } from 'react-router-dom'
import * as actions from 'actions';
class DashBoard extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
this.props.dispatch(actions.deleteItems());
this.props.dispatch(actions.fetchItems());
}
render() {
let { items } = this.props;
let key = 0;
let renderItems =() => {
if (!items) {
return
}
return items.map((item) => {
let { action, author } = item.logs[item.logs.length - 1];
return (
<div className="dashboard-item">
<h3>{item.name}</h3>
<div className="info-container">
<span>Amount: {item.number}</span>
<span>{item.state}</span>
</div>
<span className="created">{`${action} by ${author}`}</span>
<span className="last-log">{`Last log: ${item.logs[0].action} by ${item.logs[0].author}`}</span>
<div className="buttons">
<Link to='/'>Edit</Link>
<Link to={`/items/${item.id}/edit`}>Delete</Link>
</div>
</div>
);
})
}
if (this.props.auth.token) {
return (
<div className="dashboard-container">
{renderItems()}
</div>
);
} else {
this.props.dispatch(actions.setError('You must log in.'))
return <Redirect to='/' />
}
}
}
export default withRouter(connect(
(state) => {
return state;
}
)(DashBoard));
我得到重定向工作,但點擊鏈接只是改變的URL在瀏覽器,其實我還是看到我的儀表板組件。如果我輸入localhost:3000/items/隨機ID /編輯我得到正確的結果。創建和點擊一個鏈接什麼也不做。網址欄除外,沒有任何更改。用路由器破解似乎不適合我。然而,直接輸入url的作品。我怎樣才能解決這個問題?
編輯:路由定義
import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom';
import { connect } from 'react-redux';
import Home from 'Home';
import Dashboard from 'Dashboard';
import EditItemForm from 'EditItemForm';
import NewItemForm from 'NewItemForm';
export class Main extends Component {
constructor(props) {
super(props);
}
render() {
let { auth, error } = this.props;
let renderError =() => {
if (error) {
return (
<div className="error">
<p>{error}</p>
</div>
)
} else {
return (<div></div>)
}
}
return (
<div>
{renderError()}
<Route exact={true} path="/" component={Home} />
<Route path="/dashboard" component={Dashboard} />
<Route path="/items/:id/edit" component={EditItemForm} />
<Route path="/items/new" component={NewItemForm}/>
</div>
);
}
}
export default connect(
(state) => {
return state;
}
)(Main);
編輯#2:想通了,點擊一個鏈接,即使並沒有改變路徑的路徑>定位>路徑,如果考慮作出反應DevTools
您是否檢查是否有不止一條路線與URL匹配?如果你來自React-Router v3.x,你必須改變url的匹配方式。 –
你使用BrowserRouter還是路由器? – Syberic
@Syberic,我編輯我的職務,並添加所有路由都定義 –