react-router-domを使用してルーティング – 【React】
前提
項目 | 内容 |
---|---|
React | v18.2.0 |
ルーティング
Reactはルーティング機能がありませんが、react-route-domモジュールを使ってルーティングすることができます。
$ npx create-react-app react-route-test --template typescript $ npm i react-router-dom
src配下にAbout.tsxを作成します。
About.tsx
function About() { const title: string = "概要"; return ( <div className="About"> <h1>{title}</h1> </div> ); } export default About;
index.tsxでルーティングします。
index.tsx
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; const root = ReactDOM.createRoot( document.getElementById('root') as HTMLElement ); root.render( <React.StrictMode> <App /> </React.StrictMode> ); reportWebVitals();
↓
import React from 'react'; import { createRoot } from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; // add start import About from './About'; import { BrowserRouter, Route, Routes } from 'react-router-dom'; // add end // modify start const container = document.getElementById('root') const root = createRoot(container!); root.render( <React.StrictMode> <BrowserRouter> <Routes> <Route path='/' element={<App />} /> <Route path='/about' element={<About />} /> </Routes> </BrowserRouter> </React.StrictMode>, ); // modify end reportWebVitals();
App.tsxを編集します。react-router-domのLinkを使用して/aboutのリンクを作成します。
// add start import { Link } from "react-router-dom"; // add end import './App.css'; function App() { const title: string = "ルーティング"; return ( <div className="App"> <h1>{title}</h1> <Link to='/about'> ボタン </Link> </div> ); } export default App;
デプロイ
githubにプッシュしてvercelにデプロイしました。
GitHub - takahashi-h5/react-route-test
Contribute to takahashi-h5/react-route-test development by creating an account on GitHub.
React App
Web site created using create-react-app
ドキュメント

How to Upgrade to React 18 – React
The library for web and native user interfaces

KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80~120万から受け付けております^^
得意技はJS(ES6),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント