React Router v4/v5 でネストされたルートを使用するサンプルコード
React Router v4/v5 でネストされたルートを使用する
ネストされたルートとは、URL の異なる部分に基づいて異なるコンポーネントを表示する階層的な構造です。例えば、以下のような URL 構造を持つアプリケーションがあるとします。
/
/about
/products
/products/1
/products/2
この場合、/ ルートは Home コンポーネントを表示し、/about ルートは About コンポーネントを表示します。/products ルートは Products コンポーネントを表示し、/products/1 と /products/2 ルートはそれぞれ Product コンポーネントを表示しますが、異なる製品 ID を渡します。
ネストされたルートの設定方法
React Router v4 と v5 でネストされたルートを設定するには、Route コンポーネントを使用します。
v4 の場合
<Router>
<Route path="/" component={Home} />
<Route path="/about" component={About} />
<Route path="/products" component={Products}>
<Route path="/products/:id" component={Product} />
</Route>
</Router>
<BrowserRouter>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route path="/products">
<Switch>
<Route exact path="/products" component={Products} />
<Route path="/products/:id" component={Product} />
</Switch>
</Route>
</Switch>
</BrowserRouter>
上記コードでは、Route コンポーネントの path プロパティを使用して、URL のどの部分に一致するかを指定します。:id は、Product コンポーネントに渡される動的なパスパラメータです。
ネストされたルートを使用する利点は次のとおりです。
- コードの整理: アプリケーションのナビゲーションロジックを整理しやすくなります。
- 再利用性: 共通のレイアウトやコンポーネントを複数のルートで再利用できます。
- 保守性: アプリケーションの規模が大きくなっても、コードを管理しやすくなります。
ネストされたルートを使用する際には、次の点に注意する必要があります。
- URL の構造: URL 構造は、ユーザーにとって理解しやすいものにする必要があります。
- パラメータの渡し方: 動的なパスパラメータは、コンポーネント間で正しく渡されるようにする必要があります。
- エラー処理: 404 エラーなどのエラーを適切に処理する必要があります。
React Router v4/v5 でネストされたルートを使用すると、複雑なアプリケーションのナビゲーションを構築できます。コードの整理、再利用性、保守性の向上などの利点があります。
アプリケーションの構造
├── App.js
├── components
│ ├── About.js
│ ├── Home.js
│ ├── Products.js
│ └── Product.js
└── index.js
App.js
import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Home from './components/Home';
import About from './components/About';
import Products from './components/Products';
import Product from './components/Product';
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route path="/products">
<Switch>
<Route exact path="/products" component={Products} />
<Route path="/products/:id" component={Product} />
</Switch>
</Route>
</Switch>
</Router>
);
};
export default App;
Home.js
import React from 'react';
function Home() {
return (
<div>
<h1>Home</h1>
<p>This is the home page.</p>
</div>
);
};
export default Home;
About.js
import React from 'react';
function About() {
return (
<div>
<h1>About</h1>
<p>This is the about page.</p>
</div>
);
};
export default About;
Products.js
import React from 'react';
function Products() {
return (
<div>
<h1>Products</h1>
<p>This is the products page.</p>
</div>
);
};
export default Products;
import React from 'react';
function Product({ match }) {
const { id } = match.params;
return (
<div>
<h1>Product {id}</h1>
<p>This is the product page for product {id}.</p>
</div>
);
};
export default Product;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(<App />, document.getElementById('root'));
このコードを実行すると、以下の URL 構造を持つアプリケーションが起動します。
/
/about
/products
/products/1
/products/2
それぞれの URL にアクセスすると、それに応じたコンポーネントが表示されます。
このサンプルコードは、React Router v4/v5 でネストされたルートを使用する方法を理解するのに役立ちます。
ネストされたルートを設定する他の方法
<Switch> コンポーネントを使用する
Switch コンポーネントは、複数のルートを定義し、そのうち最初の 1 つに一致するルートのみを表示します。
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/about" component={About} />
<Route path="/products">
<Switch>
<Route exact path="/products" component={Products} />
<Route path="/products/:id" component={Product} />
</Switch>
</Route>
</Switch>
上記のコードでは、/products ルートにアクセスすると、Products コンポーネントと Product コンポーネントの両方が表示されます。これは、Switch コンポーネントが最初のルート (/products) に一致するためです。
Redirect コンポーネントは、ユーザーを別の URL にリダイレクトするために使用されます。
<Route path="/old-route" render={() => <Redirect to="/new-route" />} />
上記のコードでは、/old-route にアクセスすると、ユーザーは /new-route にリダイレクトされます。
Route コンポーネントの children プロパティを使用して、ネストされたルートを定義することができます。
<Route path="/products">
<Products />
<Route path="/products/:id" component={Product} />
</Route>
上記のコードでは、/products ルートにアクセスすると、Products コンポーネントが表示されます。/products/:id ルートにアクセスすると、Products コンポーネントと Product コンポーネントの両方が表示されます。
上記の方法は、React Router v4/v5 でネストされたルートを設定する代替方法です。それぞれの方法には利点と欠点があるため、アプリケーションの要件に応じて適切な方法を選択する必要があります。
- アプリケーションが単純な場合は、
Routeコンポーネントのみで十分です。 - アプリケーションが複雑な場合は、
Switchコンポーネント、Redirectコンポーネント、Routeコンポーネントのchildrenプロパティを使用して、ネストされたルートを定義することをお勧めします。
javascript reactjs nested
