React File Import Issue - javascript

I'm very new to React and ran into an issue when trying to import a "sub-component", for lack of a better word.
In my App.js file I imported my header class: import Header from './Components/Header/Header'; Which worked fine.
Within my Header.js file I'm using router to select different components. However, when I try to import my Home class: import Home from '../Subcomponents/HomePage/HomePage'; I receive the following error: Module not found: Can't resolve '../Subcomponents/HomePage/HomePage'
My file structure is:
app.js
Components/Header/Header.js
Subcomponents/HomePage/HomePage.js
App.js Code:
import React, { Component } from 'react';
import Header from './Components/Header/Header';
import Footer from './Components/Footer/Footer';
import Body from './Components/Body/Body';
import './Assets/css/mainCSS.css';
class App extends Component {
render() {
return (
<div className="App">
<Header />
<Body />
<Footer/>
</div>
);
}
}
export default App;
Header Code:
import React from 'react';
import Home from '../Subcomponents/HomePage/HomePage';
import { Router, Route, Link } from 'react-router-dom';
const header = () => {
return <header>
<Router>
<nav>
<ul>
<li>
<Link to='/'>Home</Link>
</li>
</ul>
<hr />
<Route excat path ="/" component={Home} />
</nav>
</Router>
</header>
}
export default header;
HomePage Code:
import React from 'react';
const homepage =() =>{
return <p>
homepage working
</p>
}
export default homepage;
Am I doing something wrong here or is this not possible in React? Any advice would be greatly appreciated!
Thanks!

From Header.js, ../ puts you into Components, not into the parent. It should be '../../Subcomponents/HomePage/HomePage'.
Also, imho: within each component folder, name the file index.js so that it will be automatically exported. Than you can just do: '../../Subcomponents/HomePage'

Related

React app routing doesn't load content unless page reloaded

I've been working on a react single page app and have been trying to get the routing to work.
I believe the routing itself actually works however the page does not load the correct content unless the page is manually reloaded. Back and forward browser arrows also work.
For example I can navigate to localhost:3000 fine and the content is loaded correctly but when I press a button to navigate to localhost:3000/contacts nothing is displayed unless I refresh the page. Once manually refreshed the contacts page shows up. What gives?
index.tsx
import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom';
// Import App component
import App from './App'
// Import service workers
import * as serviceWorker from './serviceWorker'
// Render App component in the DOM
ReactDOM.render(
<Router>
<App />
</Router>
, document.getElementById('root')
)
serviceWorker.unregister()
App.tsx
// Import necessary dependencies
import React from 'react'
import Routes from './Routes'
// Create App component
function App() {
return (
<div className="App">
<Routes />
</div>
)
}
export default App
history.tsx
import { createBrowserHistory as history} from 'history';
export default history();
Home/Home.tsx
import React, { Component } from "react";
import history from './../history';
import "./Home.css";
export default class Home extends Component {
render() {
return (
<div className="Home">
hello home
<button onClick={() => history.push('/Contact')} value='click here'>Get Started</button>
</div>
);
}
}
Contact/Contact.tsx
import React, { Component } from 'react';
class Contact extends Component {
render() {
return (
<div>
hello world
</div>
);
}
}
export default Contact;
Routes.tsx
import React, { Component } from "react";
import {BrowserRouter, Router, Switch, Route } from "react-router-dom";
import Contact from "./Contact/Contact";
import Home from "./Home/Home"
import history from './history'
export default class Routes extends Component {
render() {
return (
<div>
<Router history={history}>
<Switch>
<Route path="/" exact component={Home} />
<Route path="/Contact" component={Contact} />
</Switch>
</Router>
</div>
)
}
}
Any help greatly appreciated
I think there's some extra code that might be causing conflict. You're defining the Router from react-router-dom twice:
Once here, in index.tsx
ReactDOM.render(
<Router> // here
<App />
</Router>
, document.getElementById('root')
)
and then again in Routes.tsx
<Router history={history}> // here
<Switch>
<Route path="/" exact component={Home} />
<Route path="/Contact" component={Contact} />
</Switch>
</Router>
You have to drop one of them, they're probably conflicting each other
Update
In addition to that, I think you should not use the history object directly from your export, but access it through the HOC withRouter. Then, you'd wrap
So you'd do something like this
import React, { Component } from "react";
import { withRouter } from 'react-router-dom'
import "./Home.css";
class Home extends Component {
const { history } = this.props
render() {
return (
<div className="Home">
hello home
<button onClick={() => history.push('/Contact')} value='click here'>Get Started</button>
</div>
);
}
}
export default withRouter(Home)
I think the issue here is that you need to wrap your pages with withRouter() like so:
import React, { Component } from "react";
import history from './../history';
import "./Home.css";
import { withRouter } from 'react-router-dom'; //<---------- add this
class Home extends Component {
render() {
return (
<div className="Home">
hello home
<button onClick={() => history.push('/Contact')} value='click here'>Get Started</button>
</div>
);
}
}
default export withRouter(Home); //<-------------- and add this
You will need to do the same on your Contact page as well.
Why do you have two routers?
I guess you simply need to remove the Router either in index.tsx or in Routes.tsx
According to you file naming I would remove the Router in Routes.tsx
It seems like you are using the history package for navigation. If you are using the react-router v5, then you may have to downgrade the history package to 4.10.1 until the history package developers issue a new release with the fix. As of writing this, the latest release version of history package is v5.0.1, and if you see a new release than this, you can try with that version first to see if it works, before doing the downgrade to 4.10.1
Issue Link -> https://github.com/remix-run/history/issues/804

Module not found: Can't resolve - React

I'm having a problem with the relative path for my react app. It seems super simple but I've double checked everything and I still can't get it to work.
The path is src > components(folder) > Navigation(folder) > navigation.js
The terminal says: "Failed to compile.
./src/App.js
Module not found: Can't resolve './components/Navigation/navigation' in '/Users/misbahhemraj/Desktop/facefind/src'"
This is my code in my app.Js:
import React, { Component } from 'react';
import navigation from './components/Navigation/navigation';
import './App.css';
class App extends Component {
render () {
return (
<div className="App">
<navigation />
{/*<Logo />
<ImageLinkForm />
<FaceRecognition />*/}
</div>
);
}
}
export default App;
This is my code in navigation.js
import React from 'react';
const Navigation = () => {
return (
<nav>
<p> Sign Out </p>
</nav>
)
}
export default navigation;
I've tried changing the ports and changing the syntax of the import statement but I can't get it it work. Any advice would be appreciated - thank you so much!
Look at your export component name, you have navigation and your component name it´s Navigation
import React from 'react';
const Navigation = () => {
return (
<nav>
<p> Sign Out </p>
</nav>
)
}
export default Navigation;

How to fix 404 not found when accessing the routes in the url. (SPA REACT)

I have problem regarding accessing my routes, i got confuse why it's give 404 not found when I tried to access those links. I will show guys my codes that I already made in my project.
Error:
404 Not Found
My Root Js.
import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import Header from './Includes/Header'
import Footer from './Includes/Footer'
import Index from './Index'
import Routings from './Includes/Routings'
export default class Main extends Component {
render() {
return (
<div>
<Header/>
<Index/>
<Routings/>
<Footer/>
</div>
);
}
}
if (document.getElementById('app')) {
ReactDOM.render(<Main />, document.getElementById('app'));
}
Note that I just include the Routings to my main js file. so here is my codes inside of routing
import React, {Component} from 'react'
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import Login from '../Login';
export default class Routings extends Component {
render() {
return (
<Router>
<div>
<Route path="/Login" component={Login}/>
</div>
</Router>
)
}
}
Project Structure:
So when i tried to access the Login, it gives 404 not found. I hope someone could help me thanks.

React Js: mountNode is not defined no-undef error

I am newly learning the React Js. I found the example at this Link. But when I tried the first code:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import ReactDOM from 'react-dom';
class HelloMessage extends React.Component {
render() {
return (
<div>
Hello {this.props.name}
</div>
);
}
}
ReactDOM.render(
<HelloMessage name="Taylor" />,
mountNode
);
export default HelloMessage;
I am getting this error
./src/App.js Line 18: 'mountNode' is not defined no-undef
Search for the keywords to learn more about each error.
I have already seen the answer at this StackOverflow link. But I'm sorry I couldn't get what is explained there. Provide me the suggestions. Thank you in advance!
The error message you are getting is a linting error. (static code analysis)
Make sure your mountNode variable exists.
or use something like:
render(<HelloMessage />, document.getElementById('app'));
Also make sure that you have a DOM element with id app in your HTML code:
for example:
<div id="app" />
The ReactDOM.render() method is already located under
src/index.js
like:
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
The above code renders over component in the root div located in the public/index.html
src/App.js
--->initially it looked like:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
Finally --> Now instead of rendering the App Component...we can either write the HelloMessage component under the same file or replace the App Component with something like this..
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div>
Hello {this.props.name}
</div>
</div>
);
}
}
After that I'm able to see the Hello Message in the browser localhost:3000. But the Name Taylor is not displayed there...So what I did is passed the name props from the index.js file something like:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
//Passed the name props to the
ReactDOM.render(<App name = "Taylor"/>, document.getElementById('root'));
registerServiceWorker();
Now After this point I got the successful output Hello Taylor. If you are replacing the App component with HelloMessage component, don't forget to import that file in the index.js

React router v4 cannot display components but no error in console

I am a noob just started learning React a few days ago. I have a problem while I was working with react router v4.
I have a home page component, like this:
import React, {Component} from 'react';
class AboutPage extends Component {
render() {
return (
<div>
<h1>About</h1>
<p>this is the about page</p>
</div>
);
}
}
export default AboutPage;
and here is the App.js:
import React, { Component } from 'react';
import './App.css';
import {
Link, Route, Switch,BrowserRouter
} from 'react-router-dom'
import Header from './components/common/Header';
import HomePage from './components/home/HomePage';
import AboutPage from './components/about/AboutPage';
class App extends Component {
render() {
const home = () =><h1> Home </h1>
const about = () =><h1> about </h1>
return (
<BrowserRouter>
<div className="container-fluid">
<Header/>
<Switch>
<Route exact path="/" components={home}/>
<Route path="/about" components={about}/>
</Switch>
</div>
</BrowserRouter>
);
}
}
export default App;
the headers file is just a nav element I want it for all the component.
The problem is if I click either homepage or about page, it doesn't display the content of these components. It just shows the nav element and that's all.
I built this app using creat-react-app. Is there anything wrong in my code? Thx.
Reading the docs looks like that the Route component is expecting the property component and not components. I also believe that what you want to render is your HomePage and AboutPage component

Categories