React Router: маршрут, определенный в дочернем компоненте, не работает
Я работаю над веб-приложением React с использованием маршрутизатора React.
Объекты Route, определенные в основном компоненте-оболочке, работают нормально, но если я попытаюсь определить Route для дочернего компонента, любая ссылка, указывающая на него, не сможет отобразить желаемый компонент.
Вот фрагмент кода, который пытается объяснить ситуацию:
class MainWrapper extends Component {
render() {
return (
<div className = "App">
<Switch>
<Route exact path = "/a" component= {A}/>
</Switch>
</div>
);
}
}
const A = () => {
return (
<div>
<Route exact path = "/b" component = {B}/>
<Link to = "/b"/>
</div>
)
}
const B = () => {
return (<div>HELLO</div>)
}
В моем приложении ссылка, указывающая на «/ b», не отображает компонент B, например, свойство компонента не было передано
Почему это не сработает?
Ответы 4
У вас есть где-нибудь Router? Кроме того, вы не закрыли тег Link.
Вы указываете «точный путь» в обоих маршрутах, поэтому для рендеринга B ваш путь должен быть точно «/ b», но при связывании с «/ b» компонент A будет отключен, потому что для рендеринга A вы должны быть на точном пути »/ a ". Вам следует изменить свой подход. Можно было бы удалить "точное" и включить "/ a" в вашу ссылку:
class MainWrapper extends Component {
render() {
return (
<div className = "App">
<Switch>
<Route path = "/a" component= {A}/>
</Switch>
</div>
);
}
}
const A = () => {
return (
<div>
<Route path = "/b" component = {B}/>
<Link to = "/a/b"/>
</div>
)
}
const B = () => {
return (<div>HELLO</div>)
}
если B является дочерним по отношению к A, URL-адрес должен быть /a/b вместо /b, поэтому вам просто нужно обновить компонент A с помощью этого кода.
const A = ({match}) => {
return (
<div>
<Route exact path = {`${match.url}/b`} component = {B}/>
<Link to=to = {`${match.url}/b`}/>
</div>
)
};
См. Документацию здесь
Вам нужно обернуть его в Switch, и вы должны удалить опору exact из вашего маршрута /b.
const A = ({match}) => {
return (
<div>
<Switch>
<Route path = {`${match.url}/b`} component = {B}/>
</Switch>
<Link to = "a/b"/>
</div>
)
}
Да, у меня где-то определен маршрутизатор (в родительском компоненте MainWrapper). Я исправлю опечатку во фрагменте (это не настоящий код, он отлично компилируется)