Невозможно отобразить реагирующие компоненты при нажатии на ссылки.

Question

У меня есть приложение реагирования, в котором я завернул компоненты макета для других маршрутов, дело в том, что когда я нажимаю на ссылки, присутствующие на боковой панели (часть макета), они не отображаются на экране, вот мой код .

Приложение. js

//Imports here
<Provider store={store}>
 <Router>
   <Switch>
     <Layout>
       <Route exact path="/admin" render={() => <Admin />} />
       <Route exact path="/employees" render={() => <Employees />} />
       <Route exact path="/profile" component={Profile} />
     </Layout>
   <Switch>
 </Router>
</Provider>

Макет. js

//imports here
//styling here
<Link to='/employees' />
// and likewise for rest of the routes

При нажатии на ссылки ie, сотрудники или профиль не являются будучи обработанным, попытался console.log, чтобы видеть, мешало ли мое расположение этому, но бесполезно. Пожалуйста, помогите мне

Answer 1

Если ваш URL-адрес изменяется, но содержимое не отображается, проблема заключается в том, что помимо переноса маршрутов, как указано в ответе @ G.aziz, поскольку маршруты являются дочерними компонентами макета WRT, мы должны использовать {props .children} внутри компонента макета, чтобы визуализировать содержимое следующим образом ...

Layout.jsx

<div>
<Sidebar />
<Navbar />
{props.children} // here we are rendering the routes which we mentioned in the switch component in App.js
</div>

Для меня это решение исправлено. Также, пожалуйста, обратитесь к этому вопросу для получения дополнительной информации. React-router v4, URL изменяется, но компонент не отображается

Answer 2

Он должен быть внутри компонента Switch, но вы можете обернуть его таким компонентом Layout.

const Headers = () => (
  <Layout>
    <ul>
      <li>
        <Link to="/admin">Admin</Link>
      </li>
      <li>
        <Link to="/profile">Profile</Link>
      </li>
      <li>
        <Link to="/employees">Employees</Link>
      </li>
    </ul>
  </Layout>
);


function App() {
      return (
        <Router>
          <Layout>
            <Header></Header>
           <Switch>
            <Route exact path="/admin" render={() => <Admin />} />
            <Route exact path="/employees" render={() => <Employees/>}/>
            <Route exact path="/profile" component={Profile} />
           </Switch>
          </Layout>
        </Router>
      );
    }