React-router是一个非常糟糕的开始......看起来基本不起作用。使用react-router 2.0.0,我的链接组件将URL更新为/ about,但我的页面在此之后不呈现About组件......
入口点js
var React = require('react');
var ReactDOM = require('react-dom');
var Router = require('react-router').Router;
var Route = require('react-router').Route;
var hashHistory = require('react-router').hashHistory;
var App = require('./components/App.react');
var About = require('./components/About');
ReactDOM.render(
<Router history={hashHistory} >
<Route path="/" component={App}>
<Route path="about" component={About} />
</Route>
</Router>,
document.getElementById('app')
);
App.js
'use strict';
var React = require('react');
var Link = require('react-router').Link;
var Header = require('./Header');
var UserPanel = require('./UserPanel');
var ModelPanel = require('./ModelPanel.react');
var EventPanel = require('./event/EventPanel');
var VisPanel = require('./vis/VisPanel');
var LoginForm = require('./LoginForm');
var AppStore = require('../stores/AppStore');
var AppStates = require('../constants/AppStates');
var App = React.createClass({
[... code omitted ...]
render: function() {
var viewStateUi = getViewStateUi(this.state.appState);
return (
<div>
<Header />
<Link to="/about">About</Link>
{viewStateUi}
</div>
);
}
});
答案 0 :(得分:11)
由于&#39;关于&#39;路线是“应用程序”的一个孩子。路由,您需要将this.props.children
添加到您的应用程序组件:
var App = React.createClass({
render: function() {
var viewStateUi = getViewStateUi(this.state.appState);
return (
<div>
<Header />
<Link href="/about">About</Link>
{viewStateUi}
{this.props.children}
</div>
);
}
});
或分开您的路线:
ReactDOM.render(
<Router history={hashHistory} >
<Route path="/" component={App} />
<Route path="/about" component={About} />
</Router>,
document.getElementById('app')
);
答案 1 :(得分:11)
出于某种原因,<Link>
对我来说不适用于以下配置。
// index.js
ReactDOM.render(
<Provider store={store}>
<BrowserRouter >
<App />
</BrowserRouter>
</Provider>,
document.getElementById('root')
);
// App.js
return (
<div className="App">
<Route exact={true} path="/:lang" component={Home} />
<Route exact={true} path="/" render={() => <Redirect to={{ pathname: 'pt' }} />} />
<Route path="/:lang/play" component={Play} />} />
<Route path="/:lang/end" component={End} />
</div >
);
Home组件有Link,但App上的Links也会这样做。每次我点击它,它只会改变网址,但视图会保持不变。
当我将 withRouter 添加到App.js时,我能够正常工作
export default withRouter(connect(mapStateToProps, { f, g })(App));
我仍然不明白发生了什么。也许它与redux有关,或者有一些我遗漏的细节。
答案 2 :(得分:0)
所有解决方案都不适合我,包括将withRouter
添加到我的组件中。我遇到了相同的问题,其中浏览器的地址栏更新了URL,但组件未呈现。在调试问题期间,我意识到我必须介绍问题的上下文,因为它与OP的内容有些不同。
我尝试使用的路线是一条动态路线,该路线需要一个任意参数,例如
<Route path={`/hr/employees/:id`} component={EmployeePage} />
此路由使用的组件是“自我引用”的,这意味着在该组件或其子组件中,它们具有一个指向Link
的{{1}}组件,但具有不同的ID。假设我在/hr/employees/:id
和页面上,有一个指向/hr/employees/3
的链接,例如/hr/employees/4
,如果组件没有重新渲染,我会遇到这个问题。
要解决此问题,我仅修改了<Link to='/hr/employees/4'>
组件的componentDidUpdate
方法:
EmployeePage
如果您使用的是功能组件,请使用componentDidUpdate(prevProps) {
if (this.props.match.params.id !== prevProps.match.params.id) {
// fetch data
}
}
:
useEffect