React：无法将路由呈现到不同的组件答案

【问题标题】：React: Not able to render routes to a different componentReact：无法将路由呈现到不同的组件
【发布时间】：2018-05-27 23:01:21
【问题描述】：

这是我的导航栏组件，

const Navbar = () => (

        <nav className="navbarLogged">

            <ul>
                <li><NavLink to="/">Trending</NavLink></li>
                <li><NavLink to="/live">Live</NavLink></li>
                <li><NavLink to="/fanzone">Fanzone</NavLink></li>
                <li><NavLink to="/lets-play">Let's Play</NavLink></li>
            </ul>

        </nav>


);

export default Navbar

我想以这种方式在一个不同的组件中渲染四个独立的组件。

const CoreSection = () => (
    <BrowserRouter>
        <section className="coreSectionLogged">
            <Switch>
                <Route exact path="/" render={() => <Feeds title="Home"/>}/>
                <Route path="/live" render={() => <LiveScore title="Livescore"/>}/>
                <Route path="/fanzone" render={() => <Fanzone title="Fanzone"/>}/>
                <Route path="/lets-play" render={() => <Quiz title="quiz"/>}/>
            </Switch>

        </section>
    </BrowserRouter>

);

这不会渲染组件。当我运行它时，我收到以下错误，

You should not use <Route> or withRouter() outside a <Router>

如果我将路由包装在 BrowserRouter 中，就可以解决这个问题，就像这样，

const Navbar = () => (
    <BrowserRouter>
        <nav className="navbarLogged">
            <ul>
                <li><NavLink to="/">Trending</NavLink></li>
                <li><NavLink to="/live">Live</NavLink></li>
                <li><NavLink to="/fanzone">Fanzone</NavLink></li>
                <li><NavLink to="/lets-play">Let's Play</NavLink></li>
            </ul>

        </nav>
    </BrowserRouter>


);

在这种情况下，错误消失了，但路由仍然不起作用。我在这里做错了什么？

【问题讨论】：

标签： reactjs react-router react-router-v4 react-router-dom

【解决方案1】：

这是因为您的 NavLink 组件必须在 Router 内。

如果您将 <BrowserRouter> 包裹在您的顶部组件周围，它将所有 <Switch> <Route> <NavLink> 以及与路由相关联的所有其他组件封装到单个路由器中 - 在本例中为 <BrowserRouter>

【讨论】：