reactjs - נתבים ב-Nextjs

אני מבצע שינויים ביישום הקיים שלי שנבנה באמצעות ReactJS+Typescript ועברתי להמיר אותו ל-NextJs יחד עם Typescript.

איך אני יכול לבצע שינויים בנתב? אני בודק את התיעוד של Nextjs אבל אני מתבלבל מאוד.

כעת ניתוב נמצא בקובץ ה-App.tsx שלי. הנה הקוד. אני רוצה לבצע שינויים כי כאשר אני לוחץ על handleSave באותו זמן, הפוסט שלי בבלוג לא נשמר. אני מאמין שהבעיה נובעת מהניתוב.

    return (
      <div className="All-Routes">
        <Switch>
          <Route
            exact
            path="/"
            component={props => <Index {...props} posts={this.state.posts} />}
          />
          <Route
            path="/posts/:id"
            component={props => (
              <Data {...props} post={this.state.posts[props.match.params.id]} />
            )}
          />
          <Route
            exactpath="/new"
            component={props => <Saving {...props} onSave={this.handleSave} />}
          />
        </Switch>
        <LocationDisplay />
      </div>
    );
  }
}
export default App;

תשובה #1

צור קובץ routes.js כמו למטה:

const nextRoutes = require('next-routes')
const routes = (module.exports = nextRoutes())

routes.add('/', 'index')

ותכתוב קובץ server.js עם expressjs ותוסיף לו את השורה הבאה:

const routes = require('./routes')
const handler = routes.getRequestHandler(app)
...
server.get('*', (req, res) => {
    handler(req, res, parsedUrl)
  })