React Routing and Navigation - DAV-1000/react-material GitHub Wiki

Created: 7/31/2025 17:32
Updated: 7/31/2025 17:44
Exported: 8/14/2025 11:17
Link: https://chatgpt.com/c/688b9a7f-ca8c-8001-b5b2-7ff781a0f7f8

In react, how to navigate to a page called Features.tsx in folder pages from a button click in a shared menu component

To navigate to a Features.tsx page in a pages folder from a shared menu component in React (e.g., in a Next.js or React Router project), the method depends on the routing library you're using.

Assuming Features.tsx is in the pages directory (pages/Features.tsx), you can use the useRouter hook:

import { useRouter } from 'next/router';

const Menu = () => {
  const router = useRouter();

  const handleNavigate = () => {
    router.push('/Features');
  };

  return (
    <button onClick={handleNavigate}>
      Go to Features
    </button>
  );
};

export default Menu;

Assuming your route is defined like:

<Route path="/features" element={<Features />} />

In your shared component:

import { useNavigate } from 'react-router-dom';

const Menu = () => {
  const navigate = useNavigate();

  const handleNavigate = () => {
    navigate('/features');
  };

  return (
    <button onClick={handleNavigate}>
      Go to Features
    </button>
  );
};

export default Menu;

• The route path in router.push('/Features') or navigate('/features') should match the URL path, not the filename.
• React Router is more commonly used in Create React App (CRA) projects.
• Next.js is based on filesystem routing, so file location matters.

Let me know which setup you're using if you're not sure!

My app is a new typescript Vite Reack app. Is a router included by default?

No, a new TypeScript Vite + React app does not include a router by default. You'll need to install and configure one yourself.

The most common router for React (including Vite apps) is React Router.

npm install react-router-dom

npm install --save-dev @types/react-router-dom

src/
├── main.tsx
├── App.tsx
├── pages/
│   ├── Home.tsx
│   └── Features.tsx
├── components/
│   └── Menu.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

import { Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Features from './pages/Features';
import Menu from './components/Menu';

function App() {
  return (
    <div>
      <Menu />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/features" element={<Features />} />
      </Routes>
    </div>
  );
}

export default App;

import { useNavigate } from 'react-router-dom';

const Menu = () => {
  const navigate = useNavigate();

  return (
    <button onClick={() => navigate('/features')}>
      Go to Features
    </button>
  );
};

export default Menu;

Once that's done, clicking the button will navigate to the Features.tsx page.

Let me know if you want a quick starter template or layout suggestion!

I get this error when trying to build my new page: Rollup failed to resolve import "templates/shared-theme/AppTheme" from "C:/Users/david.whitfield/source/repos/my-blog-app/src/pages/Features.tsx".
This is most likely unintended because it can break your application at runtime. If you do want to externalize this module explicitly add it to build.rollupOptions.external

This error means that Vite (via Rollup) can't resolve the import path "templates/shared-theme/AppTheme" in your file:

import AppTheme from "templates/shared-theme/AppTheme";

This is likely due to one of the following:

Vite uses relative imports (./, ../) or aliases (e.g. @/, ~) for module resolution.

Check that the path exists:

// In Features.tsx:
import AppTheme from "../../templates/shared-theme/AppTheme";

Assuming your structure is like:

src/
├── pages/
│   └── Features.tsx
├── templates/
│   └── shared-theme/
│       └── AppTheme.tsx

If you're using a shortcut like:

import AppTheme from "templates/shared-theme/AppTheme";

You need to tell Vite how to resolve "templates".

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      templates: path.resolve(__dirname, 'src/templates'),
    },
  },
});

Then restart your dev server:

npm run dev

Windows is case-insensitive, but Vite/Rollup can be case-sensitive on some setups, especially in CI or Linux.

If you’re importing a module that should not be bundled (e.g., a 3rd-party CDN script), you can externalize it:

// vite.config.ts
export default defineConfig({
  build: {
    rollupOptions: {
      external: ['templates/shared-theme/AppTheme'],
    },
  },
});

⚠️ This is not recommended unless you're absolutely sure it's intentional.

Most likely fix for your case:
Change the import to a relative path like this:

import AppTheme from "../../templates/shared-theme/AppTheme";

Or add an alias in vite.config.ts if you prefer absolute-style imports.

Let me know if you want help verifying your folder structure.

What does "to externalize this module explicitly" mean

Great question!

"To externalize a module explicitly" means telling your build tool (in this case, Rollup, which Vite uses under the hood) not to include that module in the final bundle it produces during the build.

• Normally, when you import something like:

  import AppTheme from "templates/shared-theme/AppTheme";

  Rollup tries to bundle that file and its dependencies into your app’s final JavaScript bundle.
• If Rollup cannot find or resolve that module during the build (because the path is wrong or it's an external library), it will complain.
• Sometimes, you actually want Rollup to skip bundling that module — for example, if:
  • It’s a third-party library loaded separately (via a CDN).
  • It's a Node.js built-in module you don’t want to bundle.
  • You want to dynamically load it at runtime or expect it to be available globally.

Marking the module as "external" so Rollup doesn't try to bundle it, but instead leaves the import as-is in the final output.

For example, in your vite.config.ts:

export default defineConfig({
  build: {
    rollupOptions: {
      external: ['templates/shared-theme/AppTheme'], // Rollup won't bundle this module
    },
  },
});

• The import statement will remain in the bundled code.
• Your app will expect this module to be available at runtime (via global variable, CDN, or environment).
• If it’s not actually available at runtime, your app will break with errors because it can’t find that module.

• Mostly when you deliberately want to exclude some modules from your bundle because they’re provided elsewhere.
• Not recommended for your own project files (like components or themes), unless you have a very specific setup.

You probably don’t want to externalize "templates/shared-theme/AppTheme" since it looks like your own local code. You want to:

• Fix the import path so Rollup can find it, or
• Configure an alias so Vite knows how to resolve it.

If you want, I can help you fix your import paths or configure aliases!

Powered by ChatGPT Exporter