Как реализовать вложенную маршрутизацию (дочерние маршруты) в реакции маршрутизатора v4? - PullRequest
Новая
       24

Как реализовать вложенную маршрутизацию (дочерние маршруты) в реакции маршрутизатора v4?

0 голосов
/ 19 марта 2019

Дерево компонентов, которое я хочу, как показано ниже - Авторизоваться - Главная - контакт - О

Контакты и О детях Дома. Это мой App.js, 

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>

          <Route exact path="/home" component={HomeView} />

        </div>
      </BrowserRouter>
    );
  }
}

render(<App />, document.getElementById('root'));

Это дом, 

export const HomeView = ({match}) => {
 return(
   <div>
    <NavBar />


    Here i want to render the contact component, (Navbar need to stay)

   </div>
 )

}

Это мой Навбар, 

 export const NavBar = () => {
  return (
    <div>
      <Link to="/home">Home</Link> 
      <Link to="/home/contact">Contact</Link> 

      <hr/>
    </div>
  )
}

Компоненту контактов просто нужно отобразить "привет текст".

1 Ответ

2 голосов
/ 19 марта 2019

Для создания вложенных маршрутов необходимо удалить exact: 

<Route path="/home" component={HomeRouter} />

И добавить несколько маршрутов: 

export const HomeRouter = ({match}) => {
 return(
   <div>
    <NavBar />
    {/* match.path should be equal to '/home' */}
    <Switch>
      <Route exact path={match.path} component={HomeView} />
      <Route exact path={match.path + '/contact'} component={HomeContact} />
    <Switch>
   </div>
 )

}

Вам не нужно использовать match.path во вложенных маршрутах, но таким образом будет проще переместить все из "/ home" в "/ new / home", если вы решите изменить маршрут.

...