Управление маршрутизацией по ссылке в компоненте внука - PullRequest
Новая
       16

Управление маршрутизацией по ссылке в компоненте внука

2 голосов
/ 22 мая 2019

У меня есть компонент App, у которого есть дочерний компонент NavigationBar.У NavigationBar также есть дочерние элементы, это NavigationBarTabs.Что я хочу сделать, это управлять маршрутизацией в компоненте приложения, но иметь ссылки в NavigationBarTabs.Если я делаю это таким образом, я могу получить новый контент в приложении только путем обновления.Если я буду хранить ссылки в компоненте приложения, он будет работать нормально, но, очевидно, я бы хотел, чтобы эти ссылки были в NavigationBarTabs.Есть ли способ, которым я могу это сделать?Примеры ниже:
Работает после нажатия на ссылку: 

<BrowserRouter>
   <Route path ='/Profile' component = {Profile}/>
   <Route path ='/About' component={About}/>
   <Route path ='/Catalog' component={Catalog}/>
   <Link to={'/Profile'}>Profile</Link>
   <Link to={'/Catalog'}>Catalog</Link>
   <Link to={'/About'}>About</Link>
</BrowserRouter>

Работает после нажатия на ссылку и обновление страницы: 

<BrowserRouter>
   <NavigationBar/> <--- Tabs with Links are stored there, same 'to' prop
   <Route path ='/Profile' component = {Profile}/>
   <Route path ='/About' component={About}/>
   <Route path ='/Catalog' component={Catalog}/>
</BrowserRouter>

Ответы [ 2 ]

0 голосов
/ 23 мая 2019

Завершение верхнего компонента в решенную проблему

0 голосов
/ 22 мая 2019

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

Компонент "Маршруты": я импортировал компоненты, к которым я хотел бы направить, в мой компонент "Маршруты". Как показано ниже. 

import React, {Component} from 'react'
import {BrowserRouter, Route, Link} from 'react-router-dom';
import Component from './component.js';

const routes = [
  {
  path: '/',
  exact: true,
  main: () => <place component here/>
  },
  {
  path: '/dogs',
  main: () => <place component here/>
  },
  {
  path: '/cats',
  main: () => <place component here/>
  }
];

export default routes;

Компонент боковой панели. Затем я поместил свои ссылки в компонент боковой панели, как показано ниже. 

import React from 'react';
import './SideDrawer.css';
import {BrowserRouter, Route, Link} from 'react-router-dom';


const sideDrawer extends Component{

 render(){
  return(
   <nav className='sidebar'>
     <ul>
      <li><Link to='/'>Home</Link></li>
      <li><Link to='/dogs'>Dogs</Link></li>
      <li><Link to='/cats'>Cats</Link></li>
     </ul>
   </nav>
  );
 }
};

export default sideDrawer;

Затем в моем компоненте App.js, который будет отображать мою страницу, я сделал следующий импорт: 

import React, {Component} from 'react';
import SideDrawer from './components/SideDrawer/SideDrawer';
import {BrowserRouter, Route, Link} from 'react-router-dom';
import routes from './components/routes/routes.js';

Затем включил следующее в мое заявление о возвращении. 

return(
      <div style={{height:'100%'}}>
        <BrowserRouter>

        <SideDrawer/>
         <main>
          {routes.map((route) => (
           <Route
            key={route.path}
            path={route.path}
            exact={route.exact}
            component={route.main}
            />
          ))}
         </main>
        </BrowserRouter>
      </div>
    );
  }
}

обратите внимание, что все внутри оператора возврата App.js заключено в тег BrowserRouter. Надеюсь, это поможет вам.

...