标题差不多。我有一个无序列表,但链接仅更改 URL,而不更改页面上显示的实际组件。关于为什么会发生这种情况有什么想法吗?我想我已经包含了所有相关代码,但如果我遗漏了某些内容,请告诉我。谢谢!
App.js
import React, { Component } from 'react';
import Header from './Header';
import Main from './Main';
class App extends Component {
render() {
return (
<div>
<Header />
<Main />
</div>
)
}
}
export default App
标题.js
import React, {Component} from 'react';
import {Link} from 'react-router-dom';
class Header extends Component {
render() {
return(
<div>
<hr />
<div className="table">
<ul id="horizontal-list">
<li><Link to='/'>Component1</Link></li>
<li><Link to='/ts'>Component2</Link></li>
<li><Link to='/cs'>Component3</Link></li>
<li><Link to='/cw'>Component4</Link></li>
</ul>
</div>
<hr />
</div>
);
}
}
export default Header
Main.js
import React from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import Component1 from './components/Component1';
import Component2 from './components/Component2';
import Component3 from './components/Component3';
import Component4 from './components/Component4';
class Main extends Component {
<Router>
<div>
<Route exact path='/' component={Component1} />
<Route path='/ts' component={Component2} />
<Route path='/cs' component={Component3} />
<Route path='/cw' component={Component4} />
</div>
</Router>
);
export default Main
index.js
import React from 'react';
import {render} from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import {BrowserRouter} from 'react-router-dom';
render((
<BrowserRouter>
<App />
</BrowserRouter>
), document.getElementById('root'));
registerServiceWorker();
最佳答案
您的<Link/>
组件必须是相同的子组件 <Router/>
组件作为您的<Route/>
组件。
删除<Router/>
来自<Main/>
组件并将其放置在 <Main/>
的最近祖先中和<Header/>
。这将是你的<App/>
组件。
关于javascript - React-Router v4 问题 - URL 更新但组件未重新渲染,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48244225/