Как вы реагируете на маршруте?

Question

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

Мой основной файл index.js выглядит следующим образом:

ReactDOM.render(
    <BrowserRouter>
        <div>
            <Switch>
                <Route path="/adminDash" exact component={AdminDashMain}/>
                <Route path="/admin/ClientSearch" exact component={ClientDetailsMain}/>
                <Route path="/" exact component={LogIn}/>
            </Switch>
        </div>
    </BrowserRouter>

    , document.getElementById('root'));

в основной строке поиска клиента у меня есть 3 компонента

class ClientDetailMain extends React.Component {

    render() {
        return(
            <div>
                <Header />
                <SubHeader username={this.props.match.params.username} />
                <Display username={this.props.match.params.username}/>
            </div>
        );
    }
}

export default withRouter(ClientDetailMain);

Я использую <Display/> какконтейнер и внутри него я хочу иметь другой маршрут, чтобы человек мог перейти на

/admin/ClientSearch/refined
/admin/ClientSearch/general
/admin/ClientSearch/fixed

Я понял, что /admin/ClientSearch будет совпадать независимо, поэтому заголовок и подзаголовок будут отображаться на всех 3 маршрутах,однако мои маршруты, записанные как:

const Display = () =>{
    return(
        <div>
           <Route path ='/admin/ClientSearch/refined' component={<Refined/>
           <Route path ='/admin/ClientSearch/general' component={<General/>
           <Route path ='/admin/ClientSearch/fixed' component={<Fixed/>
        </div>
    )
};

export default withRouter(ClientDisplay);

, ничего не отображают.Это то, как я должен это писать?Когда я ссылаюсь на эти три, появляются заголовок и подзаголовок, а компоненты отдельных маршрутов - нет.

Например, '/admin/ClientSearch/fixed' показывает заголовок и подзаголовок, но не имеет собственных компонентов.

Answer 1

Они ключ находится в "точном" атрибуте ваших маршрутов.Кроме того, когда вы создаете компонент с маршрутами внутри, вы можете получить URL предыдущих маршрутов через его реквизиты.Как в следующем примере:

class Main extends React.Component {
  render(){

    return (
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/about' component={About} />
        <Route exact path='/contact' component={Contact} />
        <Route path='/admin' component={AdminArea} />
      </Switch>
    )
  }
}

Тогда у вас есть такие под-маршруты:

const AdminArea = ({match}) => (
  <Switch>
    <Route exact path={`${match.url}/specie`} component={Component} />
    <Route exact path={`${match.url}/color`} component={Component} />
    <Route exact path={`${match.url}/user/:id`} component={Component}/>
  </Switch>
)