如果单击导航链接,我可以看到 slug 已更改但组件未呈现。我必须手动刷新页面才能看到组件,而页面应该在路由/slug 更改时自行重新呈现。
应用程序.js
import React, { Component } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Me from './components/me';
import Contrib from './components/contrib';
import Projects from './components/projects';
import Contact from './components/contact';
class App extends Component {
render() {
return (
<div className="container">
<BrowserRouter>
<Switch>
<Route exact path="/" component={Me} />
<Route path="/contrib" component={Contrib} />
<Route path="/projects" component={Projects} />
<Route path="/contact" component={Contact} />
</Switch>
</BrowserRouter>
</div>
);
}
}
头文件.jsx
import { BrowserRouter, NavLink} from 'react-router-dom';
const Header = () => {
return (
<div className="container">
<div id="logo">
<img src={Earth} alt="placeholdit" className="rounded" />
</div>
<nav>
<BrowserRouter>
<ul>
<li><NavLink to="/">Home</NavLink></li>
<li><NavLink to="/contrib">Contributions</NavLink></li>
<li><NavLink to="/projects">Projects</NavLink></li>
<li><NavLink to="/contact">Contact</NavLink></li>
<li></li>
</ul>
</BrowserRouter>
</nav>
</div>
)
}
如果我删除
<BrowserRouter>
来自 header.jsx
我收到一条错误消息: “您不应在 <Route>
之外使用 withRouter()
或 <Router>
” .如果添加
<BrowserRouter>
内部 header.jsx
错误消失了,但组件未在路由/slug 更改时呈现。
最佳答案
您需要环绕最高阶组件以使其按预期工作。如果您的应用程序很简单,请将其包装在 ReactDOM.render 方法中。像这样
ReactDOM.render((
<BrowserRouter>
<App/>
</BrowserRouter>),
document.getElementById('root'))
关于reactjs - react-router-dom 不会在路由更改时渲染组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53490431/