เคนเคฒ: เคฐเคฟเคเค•เฅเคŸ เคฐเคพเค‰เคŸเคฐ เคกเฅ‹เคฎ เค•เฅ‹ เค•เฅˆเคธเฅ‡ เคธเฅเคฅเคพเคชเคฟเคค เค•เคฐเฅ‡เค‚

เคฐเคฟเคเค•เฅเคŸ เคฐเคพเค‰เคŸเคฐ DOM, เคฐเฅ‚เคŸเคฟเค‚เค— เค•เฅเคทเคฎเคคเคพเค“เค‚ เค•เฅ‡ เคธเคพเคฅ เคธเคฟเค‚เค—เคฒ-เคชเฅ‡เคœ เคเคชเฅเคฒเคฟเค•เฅ‡เคถเคจ เคฌเคจเคพเคจเฅ‡ เค•เฅ‡ เคฒเคฟเค เคฐเคฟเคเค•เฅเคŸ เค‡เค•เฅ‹เคธเคฟเคธเฅเคŸเคฎ เคฎเฅ‡เค‚ เคตเฅเคฏเคพเคชเค• เคฐเฅ‚เคช เคธเฅ‡ เค‰เคชเคฏเฅ‹เค— เค•เฅ€ เคœเคพเคจเฅ‡ เคตเคพเคฒเฅ€ เคฒเคพเค‡เคฌเฅเคฐเฅ‡เคฐเฅ€ เคนเฅˆเฅค เค‡เคธ เคฒเคพเค‡เคฌเฅเคฐเฅ‡เคฐเฅ€ เค•เคพ เคเค• เคฎเคนเคคเฅเคตเคชเฅ‚เคฐเฅเคฃ เคฒเคพเคญ เคฏเคน เคนเฅˆ เค•เคฟ เคฏเคน เคฏเฅ‚เค†เคฐเคเคฒ เค•เฅ‡ เคฎเคฟเคฒเคพเคจ เค”เคฐ เค•เฅเค› เค˜เคŸเค•เฅ‹เค‚ เค•เฅ‹ เคธเค•เฅเคฐเคฟเคฏ เค•เคฐเคจเฅ‡ เค•เฅ‡ เคฒเคฟเค เค•เคˆ เคชเฅเคฐเค•เคพเคฐ เค•เฅ€ เคธเฅเคตเคฟเคงเคพเคเค เคชเฅเคฐเคฆเคพเคจ เค•เคฐเคคเคพ เคนเฅˆเฅค

เคฐเคฟเคเค•เฅเคŸ เคฐเคพเค‰เคŸเคฐ เคกเฅ‹เคฎ เค•เฅเคฏเคพ เคนเฅˆ?

เคฐเคฟเคเค•เฅเคŸ เคฐเคพเค‰เคŸเคฐ DOM เคเค• เค—เคคเคฟเคถเฅ€เคฒ, เค•เฅเคฒเคพเค‡เค‚เคŸ-เคธเคพเค‡เคก เคฐเฅ‚เคŸเคฟเค‚เค— เคฒเคพเค‡เคฌเฅเคฐเฅ‡เคฐเฅ€ เคนเฅˆ เคชเฅเคฐเคคเคฟเค•เฅเคฐเคฟเคฏเคพ เคชเคฐเฅเคฏเคพเคตเคฐเคฃ, เคกเฅ‡เคตเคฒเคชเคฐเฅเคธ เค•เฅ‹ เคฎเคœเคฌเฅ‚เคค เค”เคฐ เคธเฅเคฒเคญ เคตเฅ‡เคฌ เคเคชเฅเคฒเคฟเค•เฅ‡เคถเคจ เคฌเคจเคพเคจเฅ‡ เค•เฅ€ เค…เคจเฅเคฎเคคเคฟ เคฆเฅ‡เคคเคพ เคนเฅˆเฅค เคฎเฅ‚เคฒ เคตเคฟเคšเคพเคฐ เค†เคชเค•เฅ‡ เคฏเฅ‚เค†เคˆ เค•เฅ‹ เคตเคฐเฅเคคเคฎเคพเคจ เคฏเฅ‚เค†เคฐเคเคฒ เค•เฅ‡ เคธเคพเคฅ เคธเคฟเค‚เค•เฅเคฐเคจเคพเค‡เคœเคผ เค•เคฐเคจเคพ เคนเฅˆ, เคœเคฟเคธเคธเฅ‡ เค†เคชเค•เคพ เคเคชเฅเคฒเคฟเค•เฅ‡เคถเคจ เคธเคนเคœ เค”เคฐ เค‰เคชเคฏเฅ‹เค—เค•เคฐเฅเคคเคพ เค•เฅ‡ เค…เคจเฅเค•เฅ‚เคฒ เคฌเคจ เคœเคพเคเค—เคพเฅค

เคฏเคน เคฒเคพเค‡เคฌเฅเคฐเฅ‡เคฐเฅ€ เค‰เคชเคฏเฅ‹เค—เค•เคฐเฅเคคเคพ เค…เคจเฅเคญเคต เค•เฅ‹ เคฎเคนเคคเฅเคตเคชเฅ‚เคฐเฅเคฃ เคฐเฅ‚เคช เคธเฅ‡ เคธเคฎเฅƒเคฆเฅเคง เค•เคฐเคคเฅ€ เคนเฅˆ เค•เฅเคฏเฅ‹เค‚เค•เคฟ เคฏเคน เคธเฅเคจเคฟเคถเฅเคšเคฟเคค เค•เคฐเคคเฅ€ เคนเฅˆ เค•เคฟ เค‰เคชเคฏเฅ‹เค—เค•เคฐเฅเคคเคพเค“เค‚ เค•เฅ‹ เคเคชเฅเคฒเคฟเค•เฅ‡เคถเคจ เค•เฅ‡ เคฎเคพเคงเฅเคฏเคฎ เคธเฅ‡ เคจเฅ‡เคตเคฟเค—เฅ‡เคŸ เค•เคฐเคคเฅ‡ เคธเคฎเคฏ เค…เคชเคจเฅ‡ เคฌเฅเคฐเคพเค‰เคœเคผเคฐ เค•เฅ‹ เคฐเฅ€เคซเฅเคฐเฅ‡เคถ เค•เคฐเคจเฅ‡ เค•เฅ€ เค†เคตเคถเฅเคฏเค•เคคเคพ เคจเคนเฅ€เค‚ เคนเฅˆเฅค เค‡เคธเค•เฅ‡ เค…เคฒเคพเคตเคพ, เค‡เคธเค•เฅ‡ เคฒเคฟเค เค•เคพเคฐเฅเคฏเคพเคจเฅเคตเคฏเคจ เคธเฅ€เคงเคพ เคนเฅˆเฅค

เคฐเคฟเคเค•เฅเคŸ เคฐเคพเค‰เคŸเคฐ เคกเฅ‹เคฎ เคธเฅเคฅเคพเคชเคฟเคค เค•เคฐเคจเคพ

เค‡เคธ เคธเฅ‡เคŸเค…เคช เค•เฅ‹ เคชเฅเคฐเคพเคชเฅเคค เค•เคฐเคจเฅ‡ เค•เฅ‡ เคฒเคฟเค, เคนเคฎเฅ‡เค‚ เคธเคฌเคธเฅ‡ เคชเคนเคฒเฅ‡ เคฐเคฟเคเค•เฅเคŸ-เคฐเคพเค‰เคŸเคฐ-เคกเฅ‹เคฎ เคฒเคพเค‡เคฌเฅเคฐเฅ‡เคฐเฅ€ เค•เฅ‹ เค‡เค‚เคธเฅเคŸเฅ‰เคฒ เค•เคฐเคจเคพ เคนเฅ‹เค—เคพเฅค เคฏเคน เค†เคชเค•เฅ‡ เคŸเคฐเฅเคฎเคฟเคจเคฒ เคชเคฐ เคจเคฟเคฎเฅเคจเคฒเคฟเค–เคฟเคค เค•เคฎเคพเค‚เคก เคšเคฒเคพเค•เคฐ เค†เคธเคพเคจเฅ€ เคธเฅ‡ เค•เคฟเคฏเคพ เคœเคพ เคธเค•เคคเคพ เคนเฅˆ:

npm install react-router-dom

เคฏเคน เค•เคฎเคพเค‚เคก เค‡เค‚เคธเฅเคŸเฅ‰เคฒ เค•เคฐเคคเคพ เคนเฅˆ เคฐเคฟเคเค•เฅเคŸ เคฐเคพเค‰เคŸเคฐ เคกเฅ‹เคฎ เคนเคฎเคพเคฐเฅ‡ เคชเฅเคฐเฅ‹เคœเฅ‡เค•เฅเคŸ เคฎเฅ‡เค‚ เคชเฅˆเค•เฅ‡เคœเฅค เคธเคซเคฒ เค‡เค‚เคธเฅเคŸเคพเคฒเฅ‡เคถเคจ เคชเคฐ, เค…เคฌ เคนเคฎ 'เคฐเคฟเคเค•เฅเคŸ-เคฐเคพเค‰เคŸเคฐ-เคกเฅ‹เคฎ' เคธเฅ‡ เค†เคตเคถเฅเคฏเค• เค˜เคŸเค• เค•เฅ‹ เค…เคชเคจเฅ‡ เคเคชเฅเคฒเคฟเค•เฅ‡เคถเคจ เคฎเฅ‡เค‚ เค†เคฏเคพเคค เค•เคฐ เคธเค•เคคเฅ‡ เคนเฅˆเค‚เฅค

เคฐเคฟเคเค•เฅเคŸ เคฐเคพเค‰เคŸเคฐ เคกเฅ‹เคฎ เค•เฅ€ เคธเฅเคฅเคพเคชเคจเคพ

เค…เคฌ เคœเคฌ เคนเคฎเคจเฅ‡ เค‡เคธเฅ‡ เค…เคชเคจเฅ‡ เคชเฅเคฐเฅ‹เคœเฅ‡เค•เฅเคŸ เคชเคฐ เคธเคซเคฒเคคเคพเคชเฅ‚เคฐเฅเคตเค• เคธเฅเคฅเคพเคชเคฟเคค เค•เคฐ เคฒเคฟเคฏเคพ เคนเฅˆ, เคคเฅ‹ เค‡เคธเฅ‡ เคฒเคพเค—เฅ‚ เค•เคฐเคจเฅ‡ เค•เคพ เคธเคฎเคฏ เค† เค—เคฏเคพ เคนเฅˆเฅค เค†เค‡เค เคชเฅเคฐเคคเคฟเค•เฅเคฐเคฟเคฏเคพ-เคฐเคพเค‰เคŸเคฐ-เคกเฅ‹เคฎ เค•เฅ‡ เคฌเฅเคจเคฟเคฏเคพเคฆเฅ€ เค•เคพเคฐเฅเคฏเคพเคจเฅเคตเคฏเคจ เคชเคฐ เคเค• เคจเคœเคผเคฐ เคกเคพเคฒเฅ‡เค‚:

import React from 'react';
import {BrowserRouter as Router, Route, Switch} from 'react-router-dom';
import Component1 from './Component1';
import Component2 from './Component2';
function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Component1} />
        <Route path="/component2" component={Component2} />
      </Switch>
    </Router>
  );
}
export default App;

เค‰เคชเคฐเฅ‹เค•เฅเคค เค•เฅ‹เคก เคฎเฅ‡เค‚, เคนเคฎเคจเฅ‡ เค†เคตเคถเฅเคฏเค• เค˜เคŸเค•เฅ‹เค‚ เค•เฅ‹ เค†เคฏเคพเคค เค•เคฟเคฏเคพ เคนเฅˆ เคฐเคฟเคเค•เฅเคŸ เคฐเคพเค‰เคŸเคฐ เคกเฅ‹เคฎ เคชเฅเคธเฅเคคเค•เคพเคฒเคฏเฅค

เคธเค‚เคนเคฟเคคเคพ เค•เฅ‹ เคธเคฎเคเคจเคพ

  • RSI `เคฏเฅ‚เค†เคˆ เค•เฅ‹ เคฏเฅ‚เค†เคฐเคเคฒ เค•เฅ‡ เคธเคพเคฅ เคธเคฟเค‚เค• เคฎเฅ‡เค‚ เคฐเค–เคจเฅ‡ เค•เฅ‡ เคฒเคฟเค เค˜เคŸเค• HTML5 เค‡เคคเคฟเคนเคพเคธ เคเคชเฅ€เค†เคˆ (เคชเฅเคถเคธเฅเคŸเฅ‡เคŸ, เคฐเคฟเคชเฅเคฒเฅ‡เคธเคธเฅเคŸเฅ‡เคŸ เค”เคฐ เคชเฅ‰เคชเคธเฅเคŸเฅ‡เคŸ เค‡เคตเฅ‡เค‚เคŸ) เค•เคพ เค‰เคชเคฏเฅ‹เค— เค•เคฐเคคเคพ เคนเฅˆเฅค เคนเคฎเคจเฅ‡ เค‡เคธเฅ‡ ` เค•เคพ เค‰เคชเคจเคพเคฎ เคฆเคฟเคฏเคพ เคนเฅˆ`เคธเฅเคตเคฟเคงเคพ เค•เฅ‡ เคฒเคฟเค.
  • เคฐเคพเค‰เคŸเคฐ เค•เฅ‡ เคญเฅ€เคคเคฐ, เคนเคฎเคจเฅ‡ เคเค• ` เคฐเค–เคพ เคนเฅˆ`เค˜เคŸเค•. เคฏเคน เคฐเคฟเคเค•เฅเคŸ เคฐเคพเค‰เคŸเคฐ เค˜เคŸเค• เค…เคชเคจเฅ‡ เคฌเคšเฅเคšเฅ‹เค‚ เค•เฅ‡ เคฎเคพเคงเฅเคฏเคฎ เคธเฅ‡ เค–เฅ‹เคœ เค•เคฐเคคเคพ เคนเฅˆ`เค˜เคŸเค•เฅ‹เค‚ เค•เฅ‹ เคชเคนเคฒเฅ‡ เคฐเฅ‡เค‚เคกเคฐ เค•เคฐเคจเฅ‡ เค•เฅ‡ เคฒเคฟเค เคœเคนเคพเค‚ เคชเคฅ เคชเฅเคฐเฅ‹เคช เคธเฅเคฅเคพเคจ เค•เฅ‡ เคตเคฐเฅเคคเคฎเคพเคจ เคชเคฅเคจเคพเคฎ เคธเฅ‡ เคฎเฅ‡เคฒ เค–เคพเคคเคพ เคนเฅˆเฅค
  • เค…เค—เคฒเฅ‡ เคšเคฐเคฃเฅ‹เค‚ เคฎเฅ‡เค‚ `เคถเคพเคฎเคฟเคฒ เคนเฅˆ`เค˜เคŸเค•. เคฏเคนเคพเค‚ เคœเคพเคฆเฅ‚ เคชเฅˆเคฆเคพ เคนเฅ‹เคคเคพ เคนเฅˆเฅค เคฐเฅ‚เคŸ เค˜เคŸเค• เค•เคพ เค‰เคชเคฏเฅ‹เค— เคนเคฎเคพเคฐเฅ‡ เคเคชเฅเคฒเคฟเค•เฅ‡เคถเคจ เค•เฅ‡ เคตเคฟเคญเคฟเคจเฅเคจ เคฎเคพเคฐเฅเค—เฅ‹เค‚ เค•เฅ‹ เคชเคฐเคฟเคญเคพเคทเคฟเคค เค•เคฐเคจเฅ‡ เค•เฅ‡ เคฒเคฟเค เค•เคฟเคฏเคพ เคœเคพเคคเคพ เคนเฅˆเฅค เคนเคฎเคจเฅ‡ เคฆเฅ‹ เคชเคฅ เคชเคฐเคฟเคญเคพเคทเคฟเคค เค•เคฟเค เคนเฅˆเค‚, เคเค• เคกเคฟเคซเคผเฅ‰เคฒเฅเคŸ เคชเคฅ ('/') เคœเฅ‹ เค•เค‚เคชเฅ‹เคจเฅ‡เค‚เคŸ1 เค•เฅ‹ เคฒเฅ‹เคก เค•เคฐเคคเคพ เคนเฅˆ, เค”เคฐ เคฆเฅ‚เคธเคฐเคพ เคชเคฅ ('/เค•เค‚เคชเฅ‹เคจเฅ‡เค‚เคŸ2') เคœเฅ‹ เคเค•เฅเคธเฅ‡เคธ เคนเฅ‹เคจเฅ‡ เคชเคฐ เค•เค‚เคชเฅ‹เคจเฅ‡เค‚เคŸ2 เค•เฅ‹ เคฒเฅ‹เคก เค•เคฐเฅ‡เค—เคพเฅค

เคฐเคฟเคเค•เฅเคŸ เคฎเฅ‡เค‚ เคธเคฟเค‚เค—เคฒ-เคชเฅ‡เคœ เคเคชเฅเคฒเคฟเค•เฅ‡เคถเคจ เคฌเคจเคพเคจเฅ‡ เค•เฅ‡ เคฒเคฟเค เคฐเฅ‚เคŸเคฟเค‚เค— เค•เฅ€ เค…เคตเคงเคพเคฐเคฃเคพ เคฎเฅŒเคฒเคฟเค• เคนเฅˆเฅค เคธเคพเคฅ เคฐเคฟเคเค•เฅเคŸ เคฐเคพเค‰เคŸเคฐ เคกเฅ‹เคฎ, เค‡เคธเฅ‡ เคฒเคพเค—เฅ‚ เค•เคฐเคจเคพ เคธเคฐเคฒ เค”เคฐ เคธเคนเคœ เคนเฅ‹ เคœเคพเคคเคพ เคนเฅˆเฅค

เค…เคคเคฟเคฐเคฟเค•เฅเคค เคธเฅเคตเคฟเคงเคพเคเค

เคฐเคฟเคเค•เฅเคŸ เคฐเคพเค‰เคŸเคฐ เคกเฅ‹เคฎ เคŠเคชเคฐ เค‰เคฒเฅเคฒเคฟเค–เคฟเคค เคธเฅเคตเคฟเคงเคพเค“เค‚ เค•เฅ‡ เค…เคฒเคพเคตเคพ เค”เคฐ เคญเฅ€ เค•เคˆ เคธเฅเคตเคฟเคงเคพเคเค เคชเฅเคฐเคฆเคพเคจ เค•เคฐเคคเคพ เคนเฅˆเฅค เค‰เคฆเคพเคนเคฐเคฃ เค•เฅ‡ เคฒเคฟเค, เคจเฅ‡เคธเฅเคŸเฅ‡เคก เคฐเฅ‚เคŸเคฟเค‚เค—, เคฏเฅ‚เค†เคฐเคเคฒ เคชเฅˆเคฐเคพเคฎเฅ€เคŸเคฐเฅเคธ, เคชเฅเคฐเฅ‹เค—เฅเคฐเคพเคฎเฅ‡เคŸเคฟเค•เคฒเฅ€ เคจเฅ‡เคตเคฟเค—เฅ‡เคถเคจ เค‡เคคเฅเคฏเคพเคฆเคฟ เค•เฅเค› เค…เคคเคฟเคฐเคฟเค•เฅเคค เคธเฅเคตเคฟเคงเคพเคเค‚ เคนเฅˆเค‚ เคœเฅ‹ เคฏเคน เคฒเคพเค‡เคฌเฅเคฐเฅ‡เคฐเฅ€ เคกเฅ‡เคตเคฒเคชเคฐ เค…เคจเฅเคญเคต เค•เฅ‹ เคฌเคขเคผเคพเคจเฅ‡ เค•เฅ‡ เคฒเคฟเค เคชเฅเคฐเคฆเคพเคจ เค•เคฐเคคเฅ€ เคนเฅˆเฅค

เคฐเคฟเคเค•เฅเคŸ เคฐเคพเค‰เคŸเคฐ เคกเฅ‹เคฎ เค•เฅ‹ เคธเคฎเคเคจเคพ เค”เคฐ เค‰เคธเคฎเฅ‡เค‚ เคฎเคนเคพเคฐเคค เคนเคพเคธเคฟเคฒ เค•เคฐเคจเคพ เค•เคฟเคธเฅ€ เคญเฅ€ เคฐเคฟเคเค•เฅเคŸ เคกเฅ‡เคตเคฒเคชเคฐ เค•เฅ‡ เคฒเคฟเค เคฎเคนเคคเฅเคตเคชเฅ‚เคฐเฅเคฃ เคนเฅˆ เค•เฅเคฏเฅ‹เค‚เค•เคฟ เคฏเคน เค—เคคเคฟเคถเฅ€เคฒ เค”เคฐ เค‡เค‚เคŸเคฐเฅˆเค•เฅเคŸเคฟเคต เคตเฅ‡เคฌ เคเคชเฅเคฒเคฟเค•เฅ‡เคถเคจ เคฌเคจเคพเคจเฅ‡ เค•เคพ เค†เคงเคพเคฐ เคฌเคจเคคเคพ เคนเฅˆเฅค

เคธเค‚เคฌเค‚เคงเคฟเคค เคชเฅ‹เคธเฅเคŸ:

เคŸเคฟเคชเฅเคชเคฃเฅ€ เค•เคฐเฅ‡เค‚