How to add multiple URL to one component?

Question

I using Next.js

I have this structure:

I need to open the same component for each URLs, like this 'http://localhost:3000/hakkimizda', 'http://localhost:3000/cerez-politikasi', 'http://localhost:3000/kullanim-kosullari' This component:

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));

How can I open the same component in several different URLs in Next.js?

You can use rewrites.

0bero
– 0bero

2020-12-29 09:19:14 +00:00
Commented Dec 29, 2020 at 9:19 — 0bero
– 0bero, Commented Dec 29, 2020 at 9:19
Or dynamic routing.

98sean98
– 98sean98

2020-12-29 09:22:02 +00:00
Commented Dec 29, 2020 at 9:22 — 98sean98
– 98sean98, Commented Dec 29, 2020 at 9:22
or redirects

Nilesh Patel
– Nilesh Patel

2020-12-29 09:44:57 +00:00
Commented Dec 29, 2020 at 9:44 — Nilesh Patel
– Nilesh Patel, Commented Dec 29, 2020 at 9:44

Gokhan Sari · Accepted Answer · 2020-12-29 10:38:32Z

0

You can make your page a component and render that component in all these pages:

components/Shared.js:

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));

pages/hakkimizda.js
pages/cerez-politikasi.js
pages/kullanim-kosullari.js

import React from 'react`;
import Shared from '../components/Shared/';

export default function Page() {
  return (
    <Shared />
  );
}

answered Dec 29, 2020 at 10:38

Gokhan Sari

8,1245 gold badges37 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kirill Margheriti Over a year ago

I know that How can create just one file to URLs ? not 3 (pages/hakkimizda.js, pages/cerez-politikasi.js, pages/kullanim-kosullari.js )

juliomalves Over a year ago

As @98sean98 suggested earlier, you'll want dynamic routing for that.

Collectives™ on Stack Overflow

How to add multiple URL to one component?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related