有没有其他方法可以在 <Router> 之外使用 <Link> 进行反应？

Question

我正在尝试在 React 路由器外部的组件中使用 Link，但出现错误：

You should not use outside a <Router>

我想呈现我的 App 组件，它包含所有需要的子组件，以及 HeaderIcons 组件，它们必须显示在每个页面的顶部。 HeaderIcons 组件包含指向特定路由的 Link。

这是App中的render方法：

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"));

这是 HeaderIcons 中的 Link：

<Link 
    to="/PersonalData"
    className="icon"
    onMouseOver={this.onmouseoverHandler}
    onMouseOut={this.onmouseooutHandler}>
    <img src="/static/images/user.png" alt="User" />
</Link>

有没有办法用 React Router v4 实现这个？

Answer 1

您可能希望按照下一种方法构建您的应用程序。（使用 React-Router）

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>

现在您将不会看到错误。

有没有其他方法可以在 <Router> 之外使用 <Link> 进行反应？

Is there any alternative to use <Link> outside a <Router> with react?

frontend

reactjs

react-router-v4