как установить React.useState на основе URL

Question

Привет. Я пытаюсь установить следующие значения для разных номеров в зависимости от страницы, на которой пользователь использует window.location.path

const [value, setValue] = React.useState(1);

Я пробовал if if, и мне кажется, что я получаю ошибки, поэтому я подумал о том, чтобы установить параметры в

<Route exact path="/" component={Home} />

однако пока я понимаю, что могу сделать что-то вроде

<Route exact path="/:id" component={Home} />

проблема заключается в следующем, как вы можете видеть ниже. У меня есть несколько установленных путей, вкладки в навигационной панели связаны с основным путем (/, / about, / news, / Programs и т. Д.)

<Switch>
           <Route exact path="/" component={Home} />
           <Route path="/about/" component={About} />
           <Route path="/news/:id" component={News} />
           <Route path="/programs/:id" component={Programs} />
           <Route path="/podcast/:id" component={Podcast} />


</Switch>

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

const [value, setValue] = React.useState({pageID});

Я думал что-то вроде

<Route path="/podcast/:id" pageID="4" component={Podcast} />

Может кто-нибудь, пожалуйста, помогите мне правильно указать, как это сделать.

Answer 1

Вы можете попытаться передать параметры компоненту с помощью метода рендеринга.

<Switch>
  <Route exact path="/" render={(props) => <Home pageId=1 {...props} />} />
  <Route path="/about/" render={(props) => <About pageId=2 {...props} />}  />
</Switch>

Answer 2

Вы можете добавить несколько параметров к пути как -

path="/podcast/:id/:pageId"

И получить -

this.props.match.params.pageId

Answer 3

скажем, что вы используете это в компоненте News

Первый шаг для извлечения параметра из ссылки - withRouter

1. Импортируйте его в свой компонент News файл: import { withRouter } from "react-router";
2. Нам нужно обернуть компонент внутри withRouter HOC следующим образом:

//instead of exporting it as export default News.
export default withRouter(News) //this will make the API we need available at the component's props

3. предположим, что вы хотите это сделать:

const [value, setValue] = React.useState({pageID});

в компонентном креплении, внутри componentDidMount мы можем извлечь параметр следующим образом:

const { id } = this.props.match.params //the id the user navigated to: /news/:id

и затем вы можете использовать идентификатор для обновления вашего состояния.