Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React router – buttons changing url, but not the content of page

I am using React, and typescript to make an application, and am trying to have multiple page functionality.
I have made a pages folder in src, inside there are folders for CompanyPage, HomePage, and SearchPage, each with a (foldername).tsx file and a (foldername).css file. On the main App.tsx I have links to all of these tsx files, but all that changes is the url, not the content Here is the code–

CompanyPage.tsx

import React from "react";

interface Props {}

const CompanyPage = (props: Props) => {
    return <div>CompanyPage</div>;
};

export default CompanyPage;

src/Routes/routes.tsx

import { createBrowserRouter } from "react-router-dom";
import App from "../App";
import HomePage from "../Pages/HomePage/HomePage";
import SearchPage from "../Pages/SearchPage/SearchPage";
import CompanyPage from "../Pages/CompanyPage/CompanyPage";

export const router = createBrowserRouter([
    {
        path: "",
        element: <App />,
        children: [
            { path: "/", element: <HomePage /> },
            { path: "/search", element: <SearchPage /> },
            { path: "/company", element: <CompanyPage /> },
        ]
    }
]);

// Add an empty export statement to make it a module
export {};

src/indedx.tsx

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter as Router } from 'react-router-dom'; // Correct import for BrowserRouter

ReactDOM.render(
  <React.StrictMode>
    <Router>
      <App />
    </Router>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

src/app/tsx

import React from "react";
import { Link, Outlet } from "react-router-dom"; // Make sure to import from 'react-router-dom'
import "./App.css";


function App() {
  return (
    <>

        <Link to="/company">Go to Company Page</Link>
        <br></br>
        <Link to ="/"> App tsx</Link>
        <br></br>
        <Link to="/search"> Search Page</Link>
        


     
        
      
 
      <Outlet />
    </>
  );
}

export default App;

I have tried looking for typos, but everything looks ok to me

Tags:

2

Answers


  1. 0

    src/Routes/routes.tsx: export default Routers;

    src/indedx.tsx: import Routers from ‘./routes’;

    Login or Signup to reply.
  2. 0

    you should use RouterProvider from react-router-dom as mentioned in this document: React Router Dom documentation for createBrowserRouter

    your src/indedx.tsx should be like this:

    import './index.css';
import React from 'react';
import ReactDOM from 'react-dom';
import reportWebVitals from './reportWebVitals';
import { router } from './Routes/routes';
import { RouterProvider as Router } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
    <Router router={router}/>
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search