Develop Reference

React Router Link Element Breaking Page

I have been working on a personal project and recently learned react and packages. I have been looking the past few days at how to fix a problem I have been having with the Link component in React Router but cant find anyone with my problem. Let me begin by saying that I have everything installed correctly and nothing should be conflicting with it, I followed the documentation closely. Essentially when I use <Link> in my code the entirety of the header doesn't display and I get a blank page with no errors. I tried replacing link with <a> and <div> tags and everything shows up fine but just not with the <Link>
Here is the problem code.
import React from "react";
import { Link } from "react-router-dom";
const NavBar = () => {
return (
<header>
<div class="row" id="pageHeader">
<div class="col-0 col-lg-2"></div> {/* spacer for begining of header */}
{/* code for company logo and link back to home page */}
<div class="col-auto">
<Link to="/Home">
<img src="./images/dnf - logo.png" alt="DNF - Logo" /> {/* logo */}
</Link>
</div>
<div class="col">
<h6 class="mt-2">Get It Done Right,<br />The First Time.</h6> {/* Header slogan */}
</div>
</div>
</header>
);
}
export default NavBar;
If anyone knows the issue to this please help I don't know what, if anything, is wrong with my code.

Wrap your Link tag and image with a Router tag.
<Router>
<Link to="/Home">
<img src="./images/dnf - logo.png" alt="DNF - Logo" /> {/* logo */}
</Link>
</Router>
Don't forget to import
import { BrowserRouter as Router, Link } from 'react-router-dom';

In your file where you import router, import BrowserRouter instead of just Router.
import { Link, Route, BrowserRouter as Router, Routes } from "react-router-dom";
Also you have to use the <Link /> inside a <Router> component.
<Router >
<NavBar /> {/* the component which uses <Link /> */}
<Routes>
<Route exact path="/home" element={<Home />} />
</Routes>
</Router>
In my case it worked!
Just try to use the browser developer console to get more idea about the error.

"Value is declared but never read" but i am declaring the value

I'm trying to build a portfolio website in React ,i'm very new to React (about 3 days), and i have imported some code for the website nav bar and declared it in the code but it doesn't show up on the website and vscode says that the value was not declared. How do i fix this?
I've tried turning the code into a component and rearranging the code but i still get the same result.
App.js - main code
import React from 'react';
import './App.css';
import navBar from './navBar/navBar';
function App() {
return (
<div className="app">
//navBar that won't show up
<navBar />
<div className="landingPage"></div>
<div className="projectPage"></div>
<div className="aboutPage"></div>
<div className="footer"></div>
</div>
)
}
export default App;
Code for the navBar
import React from "react";
import "./navBar.css";
function navBar() {
return (
<div>
<h1>NAVBAR PLACEHOLDER</h1>
</div>
)
}
export default navBar;

Your question title is little bit wierd. You have fixed the value error in your code. But you still have error with the component:
//navBar that won't show up
<navBar />
In react custom built components name should always start with capital letter. So do this:
import NavBar from './navBar/navBar';
// -- ^^ you can name it anything as it's default import
<NavBar />

Why does the whole DOM re-render when navigating between routes?

I am learning react so forgive me if this has been asked a million times but I have browsed and no solution has fixed my issue. Apart from fixing the issue I would like to understand how the mechanics under the hood work...
I have 2 simple components NavBar and Home. Code below for both.
NavBar:
import React from "react";
class NavBar extends React.Component {
render () {
return (
<nav className="navbar sticky-top navbar-light" style={NavBarStyle}>
<a className="navbar-brand" href="/">
<img src={require('./av_tiny.png')} style={ImageStyle} alt="Logo"></img>
</a>
</nav>
)
}
}
const NavBarStyle = {
// some styling
}
const ImageStyle = {
width: '100px',
height: '50px',
marginLeft: '20px'
}
export default NavBar;
Home:
import React from "react";
class Home extends React.Component {
render(){
return(
<h1>Home</h1>
);
}
}
export default Home;
When I navigate between routes, the whole DOM re-renders. I don't want the NavBar to re-render. My routes are declared in App.js as per below, and I have tried moving <NavBar /> outside the <Router> tags and the other way around. I have also tried putting <NavBar /> in its own <div> tags. Still the app behaves the same, whenever I change the URL it re-renders everything. How can this be avoided and what should I read up to properly understand the mechanics?
import React from 'react';
import {BrowserRouter as Router, Route} from "react-router-dom";
//individual components
import Home from "./Home";
import SignInPage from "./Components/Login";
import NavBar from "./Components/Layout/NavBar"
//Routing to components
class App extends React.Component {
render() {
return(
<div>
<NavBar/>
<Router>
<Route exact path="/" component={Home}/>
<Route exact path="/login" component={SignInPage}/>
</Router>
</div>
)
}
}
export default App;
EDIT:
I think I should've mentioned that re-renders happen when I navigate by manually changing the URL in the browser. I have some code on my /login route that does this.props.history.push('/'); after successful login and the DOM does not re-render. Just {SignInPage} gets unmounted and {Home} gets mounted. I would expect the same behavior when navigating between the pages manually or am I missing something?

You're using <a> elements to create your links. These cause the browser to navigate to the new URL without triggering the JavaScript that would cause the content to be dynamically updated using React.
Use the <Link> component from whatever React Router library you are using instead.
Further reading:
Anchor tags vs Link components in React

The reason why it re-renders hole dom is that the router is changing root properties.
Take a look at nested routers, it will give you an idea of how to achieve your goal Nested routes with react router v4 / v5

Issue with React Code "Target container is not a DOM element."

I'm learning react and am getting a particular error.
If I try to get my Login and Register classes into the render function of my index file to output it, I am getting the error:
Target container is not a DOM element.
It works fine if my render just has login OR register, but when I combine them both into the one render function it gives the error, I'm unsure how to fix this.
I've tried removing one or the other to double check that it compiles successfully and it does, but when I add the second class it fails.
The code for my render function in my Index.js file is;
import React from "react";
import { render } from "react-dom";
import Login from "./Login";
import Register from "./Register";
render(
<Login />,
<Register />,
document.getElementById("root")
);
The ouput code for my Login file is;
render() {
return (
<form>
<pre>{JSON.stringify(this.state)}</pre>
<button onClick={ event => this.login(event) }>Login</button>
<pre {...(this.state.message.isEmpty ? "hidden" : "")}>
{this.state.message}
</pre>
</form>
);
}
}
export default Login;
and the output code for register is almost identical to logins except and line with 'Login' is 'register'
I need help trying to find out what the problem is so I can fix it.
In this way, I can get my html file to display both buttons and not show the error
Target container is not a DOM element
Thank you.

ReactDOM.render takes one React Node, so you have to wrap your two nodes into another:
render(
<>
<Login />
<Register />
</>,
document.getElementById("root")
);

Is it possible to load html page by using React component?

For example, here is some of my React codes.
class App extends Component
{
render(){
return (
<div className="App">
<Header/>
<LoginApp />
<Register />
<Footer />
</div>
);
}
}
export default App
Now, I'd like to include the warning panel into this class, but the file was written using just only simple HTML and JavaScript codes. Is there any ways to load the dot html files into the React component class?
Here's the idea.
<div className="App">
<Header/> <--React Component
<LoginApp /> <--React Component
<Register /> <--React Component
<Footer /> <--React Component
// Load other external html files here... (Non React component)/
</div>
Thank you very much.
PS.I'm extremely new to React.

There are 2 ways for that
Fetching HTML or Setting as Inner HTML
visit this link, There is a code for explain how to do this
Add html file to a react component
also this will help Add react to a simple HTML file