Передача нескольких параметров URL в качестве реквизита с использованием реакции-маршрутизатора?

Question

Когда я передаю только один параметр следующим образом, все работает как задумано.

<Switch>
    <Route exact path="/" component={SessionViewer} />
    <Route path="/:sessionID" render={
        (props) => <SessionViewer { ...props }/>
    } />
</Switch>

Тем не менее, когда я пытаюсь передать несколько (не только один) динамический URL-параметры в качестве реквизита с реакции-маршрутизатором:

<Switch>
    <Route exact path="/" component={SessionViewer} />
    <Route path="/:sessionID/:tsFrom/:tsTo" render={
        (props) => <SessionViewer { ...props }/>
    } />
</Switch>

Страница не загружается и выдается следующая ошибка:

Uncaught SyntaxError: Unexpected token <

Есть ли правильный способ сделать это?

Answer 1

После поиска в Stackoverflow моей ошибки Uncaught SyntaxError: Unexpected token < я нашел этот ответ , который помог решить проблему. Я также вставлю это сюда:

Ошибка «неожиданный токен» может отображаться по нескольким причинам. Я столкнулся с подобной проблемой, и в моем случае проблема заключалась в том, что тег скрипта для загрузки сгенерированного пакета в html был примерно таким:

<script src="scripts/app.js"></script>

При переходе к маршруту с параметром (то же самое случится и с вложенным маршрутом или маршрутом с более чем одним сегментом), браузер попытается загрузить скрипт, используя неправильный URL-адрес. В моем случае путь маршрута был «user /: id», и браузер сделал запрос на http://127.0.0.1:3000/user/scripts/app.js вместо http://127.0.0.1:3000/scripts/app.js. Решение было простым, измените тег script следующим образом:

<script src="/scripts/app.js"></script>

Answer 2

Я понимаю, что вы пытаетесь сделать, но это не то, как вы это делаете, реагирующий маршрутизатор фактически делает это для вас, в некотором смысле, позвольте мне объяснить:

React-router на самом деле имеет свои реквизитыи вы можете connect к маршрутизатору, чтобы получить эти реквизиты

Небольшой пример:

Во-первых, измените вашу маршрутизацию на:

<Switch>
    <Route exact path="/" component={SessionViewer} />
    <Route path="/:sessionID/:tsFrom/:tsTo" component={SessionViewer} />
</Switch>

это будет увереноба маршрута будут отображать SessionViewer, затем:

1. создайте метод componentDidMount () в SessionViewer

2. React-Router-Dom предоставит вам различныепо умолчанию, если вы используете метод withRouter в своем компоненте -> Добавить export default withRouter(SessionViewer) в свой класс SessionViewer

3. Поскольку у вас теперь есть подключенный класс (к маршрутизации), вы можете получить доступ к matchвнутри вашего реквизита этот реквизит создается react-router и содержит информацию о том, что соответствует этому маршруту: Например, match.params.sessionId будет содержать: sessionId из маршрута, то есть, если у меня есть /10/from/to

match.params = {
    sessionId: 10,
    tsFrom: from,
    tsTo: to
}

Теперь внутри вашего метода componentDidMount вы можете setState все match.params, которые вам нужны для условного рендеринга для примера.

Надеюсь, это поможет, я могу пойти глубже, если вам нужно, но я лучшебудь проще