Можем ли мы создать ссылку с динамическим идентификатором в модели SPA

Я разрабатываю одностраничное приложение с использованием ReactJS. Все мое приложение работает на одной странице. Теперь мне нужна одна страница, которая принимает используемый идентификатор из URL-адреса и показывает результат на основе идентификатора пользователя. Возможно ли это в модели SPA или мне нужно перевести свой сайт на модель MPA?

Я пробовал некоторые ответы, и я не понимаю этого

например: https://stackoverflow.com/questions/id/101

Я должен получить идентификатор 101 и показать результат на основе идентификатора на странице.


reactjs dynamic single-page-application multi-page-application
person Dhanapal    schedule 22.01.2019    source источник
comment
Извините... я вас не понимаю   -  person Dhanapal    schedule 22.01.2019
comment
Вопрос, на который вы ссылались в своем вопросе, не найден   -  person Hemadri Dasari    schedule 22.01.2019
comment
Я сослался на это: github.com/nuxt/nuxt.js/issues/73 но мне не ясен этот ответ.   -  person Dhanapal    schedule 22.01.2019

Ответы (2)


arrow_upward
3
arrow_downward

да конечно это возможно.

Позвольте мне дать вам некоторые сведения об этом. Если вы создаете SPA с несколькими страницами, вы хотели бы использовать маршрутизацию на стороне клиента для отображения другой страницы на основе URL-адреса браузера. Насколько я знаю, де-факто решение для маршрутизации в реакции - это react-router, но есть много других вариантов из. см. эту ссылку. К сожалению, я не смогу полностью объяснить, как использовать react-router решение, но вот краткий пример.

Внутри вашего основного компонента (например, App.jsx) добавьте маршрутизацию:

// 1. do proper imports
import { BrowserRouter } from "react-router-dom";

// 2. wrap your application inside of BrowserRouter component

class App extends React.Component {
// your code

    render() {
        return (
            <BrowserRouter>
                {/* your app code */}

                {/* Add routing */}
                <Route path="/" exact component={Dashboard} />
                <Route path="/questions/id/:id" component={Question} />

                {/* your app code */}
            <BrowserRouter>
        )
    }
}

Теперь вы должны увидеть, что когда URL-адрес вашего браузера соответствует /questions/id/:id, компонент Question должен быть смонтирован на странице. Внутри этого компонента вы можете получить id, который был передан. Он будет внутри свойства this.props.match.param.id.

class Question extends React.Component {
// your code

    render() {
        const id = this.props.match.param.id;        

        return (
            <div>
                Page with { id } was opened
            <div>
        )
    }
}

Конечно, вы хотели бы ознакомиться с react-router документами.

person Shevchenko Viktor    schedule 22.01.2019

arrow_upward
0
arrow_downward

ReactJ не включает маршрутизатор. Но самым популярным пакетом для этого является React-router. В официальной документации есть ссылки на другие хорошие пакеты.

person Laurent    schedule 22.01.2019
comment
Было бы здорово, если бы кто-нибудь добавил конкретный пример для этого. - person Dhanapal; 22.01.2019
comment
Если вы прочитали все ссылки по предыдущей ссылке, там много примеров с динамическим маршрутом, например: reacttraining.com/react-router/web/example/url-params. - person Laurent; 22.01.2019