मैं Next.js (React.js और React-router ए>)। दो स्थान होंगे। उपयोगकर्ताओं के लिए एक फ्रंट-एंड और मालिक के लिए एक उन्हें सभी उपयोगकर्ताओं को प्रबंधित करने की अनुमति देता है। मैं दोनों क्षेत्रों को दो उप डोमेन में विभाजित करना चाहता हूं, जैसे:

Front.domain.com पैनल.डोमेन.com

प्रतिक्रिया-राउटर उप-डोमेन रूटिंग का समर्थन नहीं करता है, इसलिए मैंने एक और दृष्टिकोण खोजने की कोशिश की। मुझे ऐसा कुछ मिला, लेकिन मुझे यकीन नहीं है कि मैं यही चाहता हूं। कृपया सलाह दें।

<BrowserRouter>
  <Route path="/" render={props => {
    const [subdomain] = window.location.hostname.split('.');
    if (subdomain === 'panel') return <PanelLayout {...props}/>;
    return <FrontLayout {...props}/>;
  }}/>
</BrowserRouter>
9
user13329574 16 अप्रैल 2020, 14:13

2 जवाब

यदि आप नाओ पर होस्ट करते हैं तो आप उनके वाइल्डकार्ड डोमेन का उपयोग कर सकते हैं और अपने क्लाइंट-साइड रिएक्ट कोड को तदनुसार उपडोमेन के लिए प्रासंगिक घटक ट्री माउंट कर सकते हैं।

0
Hemal 7 जुलाई 2020, 03:40

मैं कस्टम एक्सप्रेस सर्वर का उपयोग करके सबडोमेन बनाने का प्रबंधन करता हूं। यह एक खाली ऐप है जिसमें कोई संपत्ति नहीं है, मैंने अभी तक संपत्तियों (सीएसएस, छवियों, आदि) के साथ वास्तविक ऐप पर यह कोशिश नहीं की है।

मेरे पास निम्न पृष्ठ फ़ोल्डर संरचना है:

pages/
├── admin/
│   ├── index.js
│   └── sample-page.js
└── member/
    ├── index.js
    └── accounts/
        └── dashboard.js

जब आप next dev का उपयोग कर रहे हों जो कि डिफ़ॉल्ट है। यह निम्नलिखित मार्गों का उत्पादन करेगा:

लेकिन कस्टम server.js फ़ाइल का उपयोग करके और node server.js का उपयोग करके हमारे देव सर्वर को चलाने से यह निम्नलिखित मार्ग उत्पन्न करेगा:

हमारी server.js फ़ाइल की सामग्री:

const express = require('express')
const next = require('next')
const vhost = require('vhost')

const port = process.env.PORT || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  const mainServer = express()
  const adminServer = express()
  const memberServer = express()

  adminServer.get('/', (req, res) => {
    return app.render(req, res, '/admin', req.query)
  })

  adminServer.get('/*', (req, res) => {
    return app.render(req, res, `/admin${req.path}`, req.query)
  })

  adminServer.all('*', (req, res) => {
    return handle(req, res)
  })

  memberServer.get('/', (req, res) => {
    return app.render(req, res, '/member', req.query)
  })

  memberServer.get('/*', (req, res) => {
    return app.render(req, res, `/member${req.path}`, req.query)
  })

  memberServer.all('*', (req, res) => {
    return handle(req, res)
  })

  mainServer.use(vhost('admin.lvh.me', adminServer))
  mainServer.use(vhost('lvh.me', memberServer))
  mainServer.use(vhost('www.lvh.me', memberServer))
  mainServer.listen(port, (err) => {
    if (err) throw err

    console.log(`> Ready on http://lvh.me:${port}`)
  })
})

इसे क्रिया में देखने के लिए रेपो देखें।

रेपो: https://github.com/dcangulo/nextjs-subdomain-example

3
dcangulo 23 अगस्त 2020, 07:38