I'm trying to create a website in react and am using router-dom to have the correct url showing.

I have a navbar that links to an about page using Link to="" and then using Switch and Route to display the component for the correct path, but it doesn't work.

Not sure if I missed anything here but I can't manage to display any components.

This is my PageContainer

import React from "react";
import { Route, Switch } from "react-router-dom";

import Alphabet from "./Alphabet";
import About from "./About";


export default class PageContainer extends React.Component {
  render() {
    return (
        <section className="pagecontainer">
          <Switch>

            <Route exact path="/omoss">
              <About />
            </Route>
            <Route exact path="/">
              <Alphabet />
            </Route>
          </Switch>
        </section>
    );
  }
}

This is my navbar

import React from "react";
import { Link } from "react-router-dom";

export default class Navbar extends React.Component {
  render() {
    return (
        <section>
          <section className="navbar">
            <Link to="/">Hem</Link>
            <Link to="/omoss">OM OSS</Link>
          </section>
        </section>
    );
  }
}

UPDATE:

• Removed BrowserRouter from both components above.
• Changed App.js to below.

App.js

import React from "react";
import "./App.css";

import { BrowserRouter } from "react-router-dom";

import Navbar from "./components/Navbar";
import PageContainer from "./components/PageContainer";

function App() {
  return (
    <BrowserRouter>
      <section className="App">
        <Navbar />
        <PageContainer />
      </section>
    </BrowserRouter>
  );
}

export default App;

Still not working though. The url changes but the components doesn't show.

UPDATE 2

Think I solved it when I removed two other components that where showing in Switch inside PageContainer but weren't in a Route. I had removed them before uploading here but forgot them in my code

CodePudding user response：

You have two individual <BrowserRouter /> components, each with its own state. I suggest that you move the <BrowserRouter /> component to a common ancestor of both <Navbar /> and <PageContainer /> so that they can share the same history object.

For example, remove the BrowserRouter from your components and place it higher in the component hierarchy. Now, both <Navbar /> and <PageContainer /> are in the scope of the same <BrowserRouter />

function App() {
  return (
     <BrowserRouter>
        <Navbar />
        <PageContainer />
     </BrowserRouter>
  );
}

CodePudding user response：

Try to add BrowserRouter in App.js

import React from "react";
import "./App.css";
import { BrowserRouter } from "react-router-dom";

import Navbar from "./components/Navbar";
import PageContainer from "./components/PageContainer";

function App() {
  return (
    <BrowserRouter>
      <section className="App">
        <PageContainer />
        <Navbar />
      </section>
    </BrowserRouter>
  );
}

export default App;