Chrome is showing strange errors for my React App after installing Router

Question

I'm working on converting a website from a static HTML/CSS/JS site into a React SPA and I want to use React Router for navigation. I installed Router into the correct directory, ran npm start from the correct directory, and my Terminal shows that everything compiled successfully, but my browser looks like this:

App.js file:

import React from 'react';
import './styles/App.css';
import Navbar from './components/Navbar';

class App extends React.Component {
  render() {
    return (
      <div className = "App">
      <div id ='container' className = 'container light'>
      <Navbar />
      </div>
        
      </div>
    )
    
  }
}



export default App;

Navbar.js file:

import React, { Component } from 'react';
import '../styles/App.css';
import logo from '../img/logo.png'
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";
import App from '../App';
import About from './About';
import Portfolio from './Portfolio';

class Navbar extends Component {
    render() {
        return (
            <Router>
                <div className="Navbar">
                    <nav>
                        <ul className="navlist">
                            <Link to={App}>
                                <li className="active">Home</li>
                            </Link>
                            <Link to={About}>
                                <li>About Me</li>
                            </Link>
                            <Link to={App}>
                                <img className="brand" src={logo} alt="" />
                            </Link>
                            <Link to={Portfolio}>
                                <li>Portfolio</li>
                            </Link>
                            <li className="toggler"><span role="img" aria-label="dark moon">🌑</span></li>
                        </ul>
                    </nav>
                    <Switch>
                        <Route path= {About}>
                            <About />
                        </Route>
                        <Route path= {Portfolio}>
                            <Portfolio />
                        </Route>
                        <Route path= '{App}'>
                            <App />
                        </Route>
                    </Switch>
                </div>
            </Router>
        )
    }
}

export default Navbar;

About.JS

import React, { Component } from 'react';
import '../styles/App.css';
import Navbar from './Navbar'

class About extends Component {
    render() {
        return (
            <div className="About">
                <Navbar />
                <h1>Hello World, This is the About Page</h1>
            </div>
        )
    }
}

export default About;

Portfolio.JS

import React, { Component } from 'react';
import '../styles/App.css';
import Navbar from './Navbar'

class Portfolio extends Component {
    render() {
        return (
            <div className="Portfolio">
                <Navbar />
                <h1>Hello World, This is the Portfolio Page</h1>
            </div>
        )
    }
}

export default Portfolio;

I'm new to React and I'm not sure what I've done wrong. Happy to share any additional information needed.

Answer 1

That's not how Link is used, the to prop should have the path you want to navigate, and then you have to use the Route HOC with two options, pass the component as a child or in the component prop

Link

<Link to="/about">
  About
</Link>

Route

<Route path="/about" component={About} />

<Route path="/about">
  <About/>
</Route>