Блог

Главная - Вопросы по программированию - Как вызвать компонент с реквизитами, заданными навигационной ссылкой в react?

Как вызвать компонент с реквизитами, заданными навигационной ссылкой в react?

#javascript #html #reactjs

Вопрос:

Итак, это моя главная страница :

 import React from 'react'; import TopNav from '../components/nav/TopNav'; import LeftNav from '../components/nav/LeftNav'; import Title from '../components/nav/Title';  const Home = () =gt; {    return (  lt;div className="home"gt;  lt;TopNav/gt;  lt;LeftNav/gt;  lt;Title/gt;  lt;div className="homeContent"gt;  lt;div id="topic"gt;  lt;h1gt;Bonjourlt;/h1gt;  lt;/divgt;  lt;div id="content"gt;  lt;scriptgt;  -gt; call component  lt;/scriptgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  );   };  export default Home;

и у меня в левой руке :

 import React from 'react'; import { NavLink } from 'react-router-dom';  const LeftNav = () =gt; {  return (  lt;div className="leftNavigation"gt;  lt;div className="leftNavigationBackground"gt;lt;/divgt;  lt;div className="leftNavigationContent"gt;  lt;NavLink to={{pathname:"/",component:{selectedidds:"presentation"}}} activeClassName="nav-active" exactgt;Présentationlt;/NavLinkgt;  lt;NavLink exact to="/" activeClassName="nav-active"gt;Compétenceslt;/NavLinkgt;  lt;NavLink exact to="/" activeClassName="nav-active"gt;Expérienceslt;/NavLinkgt;  lt;NavLink exact to="/" activeClassName="nav-active"gt;Formationslt;/NavLinkgt;  lt;NavLink exact to="/" activeClassName="nav-active"gt;Passionslt;/NavLinkgt;  lt;/divgt;    lt;/divgt;  ); };  export default LeftNav;

Как вы можете видеть в LeftNav, я хочу установить опорный «компонент» с тем, что я хочу внутри, и когда я нажимаю на ссылку, я просто хочу сделать своего рода переключатель в сценарии для вызова нужного мне компонента в зависимости от ссылки, которую я нажал.

Пример : я нажимаю на ссылку, которая есть в компоненте prop : «презентация», я хочу, чтобы в теле моей страницы было что-то вроде :

 if (**component** == "presentation") { lt;Presentationgt; } elseif (**component** == "presentation2") { lt;Presentation2gt; }

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

Надеюсь, я был ясен в своих объяснениях…

Спасибо за помощь !

Комментарии:

1. я не уверен в этом подходе… но вместо этого вы можете использовать параметры запроса, такие как to={"/?component=presentation"} и в вашем компоненте использовать const {components} = useParams() крюк

2. Спасибо за ваш комментарий, но я действительно не понимаю const {components} = useParams() @MrHolal

Ответ №1:

 lt;scriptgt;  -gt; call component lt;/scriptgt;

замените это на:

 lt;Route path="/presentation1" component={Presentation} /gt; lt;Route path="/presentation2" component={Presentation2} /gt;

теперь свяжитесь с этими маршрутами, и это будет работать так, как вы хотите.

Если вы находитесь на маршрутизаторе React v6, это будет:

 lt;Routesgt; lt;Route path="/presentation1" element={lt;Presentation /gt;} /gt; lt;Route path="/presentation2" element={lt;Presentation2 /gt;} /gt; lt;/Routesgt;
Метки: ,