Реакция: не удается отобразить маршруты к другому компоненту - PullRequest
Новая
       10

Реакция: не удается отобразить маршруты к другому компоненту

0 голосов
/ 28 мая 2018

Это мой компонент 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>


);

В этом случае ошибкауходит, но маршрутизация все еще не работает.Что я тут не так делаю?

1 Ответ

0 голосов
/ 28 мая 2018

Это потому, что ваш NavLink компонент должен находиться в пределах Router.

. Он будет работать, если вы оберните <BrowserRouter> вокруг вашего верхнего компонента, содержащего все <Switch> <Route> <NavLink> и все остальные, которые связаны с маршрутизацией.в один маршрутизатор - в данном случае <BrowserRouter>

...