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
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
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;
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.
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
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