Отрисовка части компонента только на нескольких маршрутах
У меня есть приложение, и я использую реактивный маршрутизатор. На каждом маршруте я визуализировал Navbar, а в Navbar у меня есть поле ввода, которое я хочу отображать только на двух маршрутах. Как мне это сделать ? Есть ли какое-либо «если», которое я могу использовать для рендеринга части компонента при совпадении маршрута?
Ответы 2
В вашем Route у вас будет коллекция RouteParams (матч, локация и история). Вы можете использовать, например. location.pathname для условного отображения всего, что вы хотите.
Что-то типа:
<Router>
<Route render = {({match,location,history})=>{
const showNavFields = location.pathname==='/your-path'
return {
<NavBar showNavFields = {showNavFields}/>
}
}}/>
<Switch>
<Route path = "/your-path" component = "AComponent"/ >
<Route path = "/your-other-path" component = "AnotherComponent"/ >
</Switch>
</Router>
Но что, если мой NavBar находится за пределами всех маршрутов? Он находится в <Router>, но вне любого <Route>, поэтому он будет отображаться на всех маршрутах.
Пока он не находится в <Switch>, указанный выше маршрут будет совпадать на всех маршрутах (и поэтому будет отображаться независимо от того, совпадают ли другие другие маршруты на том же уровне или нет). Затем вы можете условно визуализировать внутри него все, что вам нравится.
Важная часть с совпадением, местоположением, историей не работает, моя IDE показывает мне, что есть ошибка, возможно, что-то с фигурными скобками, но в этом коде я не вижу ничего плохого.
Хорошо, я знаю, что было не так, return в вашем ответе должен иметь (), а не {}. Но ожидайте, что все работает очень хорошо :D
Для этого мы можем использовать match.url.
Рабочий код. Здесь мы добавляем route matched к URL-адресу маршрутизатора, если маршрут /topics/rendering
import React from "react";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
function BasicExample() {
return (
<Router>
<div>
<ul>
<li>
<Link to = "/">Home</Link>
</li>
<li>
<Link to = "/topics">Topics</Link>
</li>
</ul>
<hr />
<Route exact path = "/" component = {Home} />
<Route path = "/topics" component = {Topics} />
</div>
</Router>
);
}
function Home() {
return (
<div>
<h2>Home</h2>
</div>
);
}
function Topics({ match }) {
return (
<div>
<h2>Topics</h2>
<ul>
<li>
<Link to = {`${match.url}/rendering`}>Rendering with React</Link>
</li>
<li>
<Link to = {`${match.url}/components`}>Components</Link>
</li>
</ul>
<Route path = {`${match.path}/:topicId`} component = {Topic} />
<Route
exact
path = {match.path}
render = {() => <h3>Please select a topic.</h3>}
/>
</div>
);
}
function Topic({ match }) {
if (match.url === '/topics/rendering') {
return (
<div>
<h3>route matched {match.params.topicId}</h3>
</div>
)
} else {
return (
<div>
<h3>{match.params.topicId}</h3>
</div>
)
}
}
export default BasicExample;
Мой NavBar находится вне всех маршрутов. Он находится в <Router>, но вне любого <Route>, поэтому он будет отображаться на всех маршрутах. Так что я думаю, что у меня не будет доступа к матчу, да? Что мне тогда делать?
Если вы перенаправлены на маршрут, определенный с помощью компонента <Route />, то у вас есть доступ к сопоставлению, но если он не определен с помощью <Route />, вы можете использовать withRouter HOC для переноса вашего компонента. withRouter дает вам доступ к местоположению, истории и сопоставлению объекта с оборачиваемым компонентом. Ссылка, чтобы помочь вам понять больше
Вы можете использовать пакет «npm i react-if-elseif-else-render». Если вы хотите использовать условия IF Else для своего кода, чем взять ссылку из этого "npmjs.com/package/react-if-elseif-else-рендеринг"