it-swarm.com.ru

Несколько вложенных маршрутов в Reaction-router-DOM v4

Мне нужно несколько вложенных маршрутов в Reaction-router-DOM

Я использую v4 реакции-маршрутизатора-дом

У меня есть мой

import { BrowserRouter as Router, Route } from 'react-router-dom';

и мне нужны компоненты, чтобы сделать так

--- Login
--- Home
    --- Page 1
    --- Page 2
    --- Page 3
--- About
--- etc

Компонент Home содержит компонент Header, который является общим для компонентов Page1, Page2 и Page3, но отсутствует в Login и About.

Мой код js читается так

<Router>
    <div>
        <Route path='/login' component={Login} />
        <Home>
            <Route path='/page1' component={Page1} />
            <Route path='/page2' component={Page2} />
            <Route path='/page3' component={Page3} />
        </Home>
        <Route path='/about' component={About} />
    </div>
</Router>

Я ожидаю, что компонент Login будет отображаться только в /login Когда я запрашиваю/page1,/page2,/page3, они должны содержать компонент Home и содержимое этой страницы соответственно.

Вместо этого я получаю представленный компонент Login, а ниже компонент этого Page1.

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

24
Aditya Talpade

Используйте сопоставление URL/пути, полученное от props this.props.match.path, чтобы получить путь, который установлен для компонента.

Определите ваши основные маршруты, как показано ниже

<Router>
  <div>
    <Route exact path="/" component={DummyIndex} /> {/* Note-1 */}
    <Route path="/login" component={Login} />
    <Route path="/home" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/etc" component={Etc} />
  </div>
</Router>

Затем в компоненте Home определите ваши маршруты 

class Home extends Component {
  render() {
    return <div>
      <Route exact path={this.props.match.path} component={HomeDefault} />
      <Route path={`${this.props.match.path}/one`} component={HomePageOne} />
      <Route path={`${this.props.match.path}/two`} component={HomePageTwo} />
    </div>
  }
}

Определенные маршруты, как показано ниже

  • /авторизоваться
  • /Главная
  • / Главная/одна
  • / Дом/два
  • /около
  • /так далее

Если вы хотите дополнительно вложить маршруты в HomePageOne, например / home/one/a и / home/one/b, вы можете использовать тот же подход. 

Примечание-1: Если вы не хотите продолжать вложение, просто установите маршрут с помощью prop exact.

РЕДАКТИРОВАТЬ (15 мая 2017 г.)

Первоначально я использовал props.match.url, а теперь я изменил его на props.match.path.

Мы можем использовать props.match.path вместо props.match.url в пути Route, так что если вы используете параметры пути в маршрутах верхнего уровня, вы можете получить его во внутренних (вложенных) маршрутах через props.match.params.

Если у вас нет параметров пути, достаточно props.match.url

35
Ram Babu S

Использовать компонент Switch в роутере v4

<Router>
<Switch>
  <Route path='/login' component={Login} />
  <Route path='/about' component={About} />
  <Home>
    <Route component={({ match }) =>
      <div>
        <Route path='/page1' component={Page1} />
        <Route path='/page2' component={Page2} />
        <Route path='/page3' component={Page3} />
      </div>
    }/>
  </Home>
</Switch>

export default class Home extends Component {
render() {
    return (
      <div className="Home">
          { this.props.children }
      </div>
    )
  }
}

Я думаю, что этот код показывает основную идею использования компонента.

3
Igor Stecyura

На этой неделе у меня возникла та же проблема, я думаю, что проект уходит в замешательство, потому что вся документация, примеры и видео относятся к предыдущим версиям, а документы по версии 4 сбивают с толку.
Вот как я это делаю, дайте мне знать, если это поможет

import React, { Component } from 'react';

import { BrowserRouter, Route, Switch } from 'react-router-dom';

import Root from './Root';
import Home from './Home';
import About from './About';

import './App.css';

class App extends Component {
    render() {
        return (
            <BrowserRouter>
                <div>
                    <Root>
                       <Switch>
                            <Route exact path="/" component={Home} />
                            <Route path="/home" component={Home} />
                            <Route path="/about" component={About} />
                        </Switch>
                    </Root>
                </div>
            </BrowserRouter>
        );
    }
}

export default App;
2
Mirdrack

Переместите все дочерние маршруты в родительский компонент и продлите маршрут, как показано ниже. 
<Route path={`${match.url}/keyword`} component={Topic}/> 
также проверьте отреагируйте на обучение маршрутизатора

1
Umair Ahmed

Используйте как следующее:

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <Link to='/create'> Create </Link>
        <Link to='/ExpenseDashboard'> Expense Dashboard </Link>
        <Switch>
          <Route path='/ExpenseDashboard' component={ExpenseDashboard} />
          <Route path='/create' component={AddExpensePage} />
          <Route path='/Edit' component={EditPage} />
          <Route path='/Help' component={HelpPage} />
          <Route component={NoMatch} />
        </Switch>
      </BrowserRouter>
    );
  }
}

Подробнее @ Включить GitHub

0
Mushfiq