Как можно отрисовывать одинаковый компонент для разных URLs?

Question

[kirillleogky]

Я использую Next.js
Структура проекта:



Как мне отрисовывать один и тот же компонент при записи данных URLs: 'localhost:3000/hakkimizda', 'localhost:3000/cerez-politikasi', 'localhost:3000/kullanim-kosullari'


Мой компонент:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';

import { withRouter } from 'next/router';

class InfoPage extends Component {
    render() {
        return <div className="info-page">
            <div className="info-page__header">
            </div>
        </div>;
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(InfoPage));

Как я могу открыть один и тот же компонент при различных URLs (без сопутствующих путей как например 'localhost:3000/static-page/hakkimizda') в Next.js ?

Comments

[WbICHA]

Можно в сервере пути резолвить, можно в доп страницах тупо импортом-экспортом export * from './my-page'; и, скорее всего, ещё можно через _app или _document, но не уверен.

[golentor]

Наверное проще будет заворачивать любой неопознанный маршрут на этот компонент, по-принципу как выводится 404)

Answer 1

[Сергей Зенькович]

Не знаю на сколько это правильно, но я так делал и это работало. Создавал несколько роутов с разными урлами а в методе Render указывал одну и ту же компоненту

<Route path='/path1' render={ ()=> <ComponentName />} />
<Route path='/path2' render={ ()=> <ComponentName />} />
<Route path='/path3' render={ ()=> <ComponentName />} />