Reactjs 是否有其他方法可供使用<;链接>;a<;路由器>;有什么反应?
我试图在React中的路由器外的组件中使用链接,但出现错误: 您不应在Reactjs 是否有其他方法可供使用<;链接>;a<;路由器>;有什么反应?,reactjs,frontend,react-router-v4,Reactjs,Frontend,React Router V4,我试图在React中的路由器外的组件中使用链接,但出现错误: 您不应在 我想呈现我的应用程序组件,其中包含所有需要的子组件,以及必须显示在顶部每个页面中的HeaderIcons组件。 HeaderIcons组件包含指向特定路由的链接 这是应用程序中的渲染方法: render() { return ( <Router history={browserHistory}> <div> <Rou
我想呈现我的应用程序组件,其中包含所有需要的子组件,以及必须显示在顶部每个页面中的HeaderIcons组件。
HeaderIcons组件包含指向特定路由的链接
这是应用程序中的渲染方法:
render() {
return (
<Router history={browserHistory}>
<div>
<Route onEnter={this.onRouteUpdate.bind(this)} exact path="" component={Configration} />
<Route onEnter={this.onRouteUpdate.bind(this)} path="/PersonalData" component={Headerlayout} />
</div>
</Router>
);
}
onRouteUpdate(routerState) {
window.scrollTo(0, 0);
sendLocation(routerState.location);
}
ReactDom.render(<App />, document.getElementById("content"));
ReactDom.render(<HeaderIcons />, document.getElementById("configuration_icons"));
render(){
返回(
);
}
onRouteUpdate(路由状态){
滚动到(0,0);
发送位置(routerState.location);
}
render(,document.getElementById(“内容”);
render(,document.getElementById(“配置图标”);
这是HeaderIcons中的链接:
<Link
to="/PersonalData"
className="icon"
onMouseOver={this.onmouseoverHandler}
onMouseOut={this.onmouseooutHandler}>
<img src="/static/images/user.png" alt="User" />
</Link>
使用react Router v4是否有办法实现这一点?在构建应用程序时,您可能希望遵循下一种方法。(带反应路由器)
从'react router dom'导入{BrowserRouter,Switch,Route};
//在应用程序组件的渲染方法中
//你需要重新构造应用程序,将HeaderIcons
放在应用程序本身的路由器
内,就像这样: /*这里的所有路由*/
。否则路由将无法工作。请不要忘记使用React.Fragment:)是否从“React router dom”导入链接?谢谢您的回答。唯一的办法是重新构造应用程序@ravibagul91是:)
import { BrowserRouter, Switch, Route } from 'react-router-dom';
// in render method of your App component
<BrowserRouter>
<div className="app">
<HeaderComponentWithLinks> // <- see it under BrowserRouter component
<div className="content">
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/about" component={AboutPage}/>
</Switch>
</div>
</div>
</BrowserRouter>