Question

这是我的Navbar组件

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>


);

在这种情况下，错误消失，但路由仍然无法正常工作。我在这里做错了什么？

Answer 1

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

如果将<BrowserRouter>包裹在包含所有<Switch> <Route> <NavLink>的顶部组件周围以及与路由到单个路由器相关的所有其他组件中，它将起作用 - 在这种情况下<BrowserRouter>

React：无法将路由呈现给其他组件

1 个答案: