Как вы проложите маршрут по маршруту в React
Я новичок в реакции и пытаюсь избавиться от всей этой проблемы с маршрутизацией. У меня есть страница, на которой я хочу отобразить несколько маршрутов.
Мой основной файл 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 будет соответствовать независимо от того, что заголовок и подзаголовок отображаются на всех трех маршрутах, однако мои маршруты записываются как:
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' показывает заголовок и подзаголовок, но не содержит собственных компонентов.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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>
)