64 lines
1.5 KiB
Markdown
64 lines
1.5 KiB
Markdown
# Utility Functions
|
|
|
|
## Configuration Utilities
|
|
|
|
The application includes utility functions for working with the base path configuration. These functions are located in `src/utils/config.js`.
|
|
|
|
### getBasePath()
|
|
|
|
Returns the base path from the application configuration.
|
|
|
|
```javascript
|
|
import { getBasePath } from '../utils/config';
|
|
|
|
// Example usage
|
|
const basePath = getBasePath(); // Returns the base path, e.g., '/app'
|
|
```
|
|
|
|
### getAssetPath(path)
|
|
|
|
Constructs a complete path for an asset by prepending the base path.
|
|
|
|
```javascript
|
|
import { getAssetPath } from '../utils/config';
|
|
|
|
// Example usage
|
|
const logoPath = getAssetPath('/images/logo.png');
|
|
// If base path is '/app', returns '/app/images/logo.png'
|
|
|
|
// Works with paths with or without leading slash
|
|
const cssPath = getAssetPath('styles/main.css');
|
|
// Returns '/app/styles/main.css'
|
|
```
|
|
|
|
## When to Use These Functions
|
|
|
|
Use these utility functions whenever you need to reference:
|
|
|
|
- Static assets (images, CSS, JavaScript)
|
|
- API endpoints
|
|
- Navigation links
|
|
- Any URL that should be relative to the application's base path
|
|
|
|
## Example in a React Component
|
|
|
|
```jsx
|
|
import React from 'react';
|
|
import { getAssetPath } from '../utils/config';
|
|
|
|
function Header() {
|
|
return (
|
|
<header>
|
|
<img src={getAssetPath('/logo.svg')} alt="Company Logo" />
|
|
<nav>
|
|
<a href={getAssetPath('/')}>Home</a>
|
|
<a href={getAssetPath('/about')}>About</a>
|
|
<a href={getAssetPath('/contact')}>Contact</a>
|
|
</nav>
|
|
</header>
|
|
);
|
|
}
|
|
|
|
export default Header;
|
|
```
|