如果单击导航链接,则可以看到弹头已更改,但组件未渲染。我必须手动刷新页面才能看到组件,而页面应该在路线/段塞更改时自行重新呈现。
App.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>
);
}
}
header.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
,则会收到一条错误消息,告诉我:“您不应该在{{1之外使用<Route>
或withRouter()
}}“ 。
如果在<Router>
内添加<BrowserRouter>
,该错误消失了,但是在更改路径/段标时,这些组件未呈现。
答案 0 :(得分:2)
注意Route、Switch 和Router 的顺序。我遵循这个顺序,它对我有用。 注意:尽量使用箭头函数
import React from "react";
import { Switch, Route, Router } from "react-router-dom";
// Containers
import { Dashboard, CardPayment } from "../Containers";
const history = createBrowserHistory();
const ReactRouter = () => {
return (
<Router history={history}>
<Switch>
<Route path="/dashboard" component={Dashboard} exact={true} />
<Route path="/card-payment" component={CardPayment} exact={true} />
<Route path="/" component={Dashboard} exact={true} />
</Switch>
</Router>
);
};
export default ReactRouter;
答案 1 :(得分:1)
您需要包装最高级的组件才能使其按预期工作。如果您的应用程序很简单,请将其包装在ReactDOM.render方法中。像这样
ReactDOM.render((
<BrowserRouter>
<App/>
</BrowserRouter>),
document.getElementById('root'))
答案 2 :(得分:1)
我有同样的问题。从header.jsx删除,然后将其放在您的index.js中:
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>
, document.getElementById('root'));
答案 3 :(得分:1)
就我而言,使用了路由器,降级“历史”库解决了问题。
app.tsx
<Router history={history}>
<Switch>
<Route exact path={`${AppRoute.ALBUMS}/:author/:album`} component={PhotosPage}/>
<Route exact path={`${AppRoute.ALBUMS}/:id`} component={AlbumsPage}/>
<Route path={AppRoute.ERROR} component={ErrorPage}/>
<Route path={AppRoute.ROOT} component={AuthorsPage}/>
</Switch>
</Router>
我的项目中的版本:
package.json:
...
"history": "4.10.1",
"react-router-dom": "5.2.0",
...
“历史”库最初是“5.0.0”版本
答案 4 :(得分:0)
对于那些无法修复此错误的人
第一步:确保高阶组件用 Router 包裹。在上面的问题中它已经完成了。
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>
);
}
}
让我们考虑一下 <Header/>
位于 <Route/>
中的任何组件内
第 2 步:如果高阶组件已经用 Router
包裹,如果您不想在 <Header/>
内单独路由,也不要包裹 <Header/>
。
import { NavLink} from 'react-router-dom';
const Header = () => {
return (
<div className="container">
<div id="logo">
<img src={Earth} alt="placeholdit" className="rounded" />
</div>
<nav>
<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>
</nav>
</div>
)
}
答案 5 :(得分:-1)
<Link to ={"/home"}>Home</Link>
就我而言 我忘了在“to”参数中添加括号然后它正在渲染组件