i have a issue with my projec, i am doing everything just like the man of tutorial, but when i run the server, my http://localhost:3000/ show me nothing, there is not error, but neither do nothing.
All this hapenned when i imported the react-roter-dom and changed the App.js
from This
function App() {
return (
<div>
<h1>Hello world</h1>
</div>
);
}
export default App;
to this
import React from "react";
import { createRoot } from "react-dom/client";
import {
createBrowserRouter,
RouterProvider,
Route,
Link,
} from "react-router-dom";
import Login from "./pages/Login";
import Register from "./pages/Register"
const router = createBrowserRouter([
{
path: "/",
element: <div> This is home world!</div>,
},
]);
function App() {
return (
<div>
<RouterProvider router={router}> </RouterProvider>
</div>
);
}
export default App;
and it should at least show the message "this is home world"
Please help me, Because i dont know what is hapening, no show error but it doesn't do anything either
this is what i got
after the router dom
before put the router dom show me " hello world" with this
function App() {
return (
<div>
<h1>Hello world</h1>
</div>
);
}
export default App;
index.JS
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
dev console
App.js
import React from "react";
import { createRoot } from "react-dom/client";
import {
createBrowserRouter,
RouterProvider,
Route,
Link,
} from "react-router-dom";
import Login from "./pages/Login";
import Register from "./pages/Register"
const router = createBrowserRouter([
{
path: "/",
element: <div> This is home world!</div>,
},
]);
function App() {
return (
<div>
<RouterProvider router={router}/>
</div>
);
}
export default App;
the consolo show me these errors
I think you just didn't save the initial code. You might want to turn on autosave on your vs code. And use the normal react render method for your index and app files.
Index.js :
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App/>,
document.getElementById('root'));
App.js:
import React from 'react'
const App = () => {
return (
<div>
<h1>GPT-3</h1>
</div>
)
}
export default App
Try to run this but save the code or turn on auto-save
Related
I am doing React project with typescript form scratch, and for some reason, I can't get the App component to render. I know the file path is correct. The Error says: Module not found: Error: Can't resolve './App' in '/Users/michaelhorvilleur/Desktop/Codecademy/react-porfolio/src'
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("#root"));
import React, { useState } from "react";
const App = () => {
return (
<div>
<h1>App</h1>
</div>
);
};
export default App;
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import App from "./App.tsx";
const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>
);
Make sure the App.js file is positioned in src folder
Tried to transfer data from 2 components to one using the same method, but it is working only for 50%. There are 3 documents: App.js, Hort.js, Hord.js. Transfering from app.js to hort.js is working, but from hord.js to hort.js isn't. What could be the reason?
App.js:
import React from 'react'
import Hort from './Hort'
function App(props) {
const text1 = 'check1'
return (
<Hort test1={text1} />
);
}
export default App;
Hord.js:
import React from 'react'
import Hort from './Hort'
function Hord(props) {
const text2 = 'check2'
return (
<Hort test2={text2} />
);
}
export default Hord;
Hort.js:
import React from 'react'
import App from './App'
import Hord from './Hord'
function Hort(props) {
return (
<div>
<h1>Just {props.test1}</h1>
<h2>Just {props.test2}</h2>
</div>
)
}
export default Hort;
You are never rendering <Hord>, if a component is never rendered, it won't render what's inside it.
In your index.js, you probably have code that looks like this:
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import App from "./App";
const rootElement = document.getElementById("root");
ReactDOM.render(
<StrictMode>
<App />
</StrictMode>,
rootElement
);
This code indicates that the <App> component will get rendered in the root element from your index.html.
So starting from the <App> component, you can build your component tree, because you never call <Hord>, it will never render, nor will the components rendered inside <Hord>.
Render <Hord> inside your <App> component.
import React from 'react'
import Hort from './Hort'
import Hord from './Hord'
function App(props) {
const text1 = 'check1'
return (
<Hort test1={text1} />
<Hord />
);
}
export default App;
As mentioned in the comments, you shouldn't import components that could cause infinite loops.
import React from 'react'
// * removed imports
function Hort(props) {
return (
<div>
<h1>Just {props.test1}</h1>
<h2>Just {props.test2}</h2>
</div>
)
}
export default Hort;
I've seen a few questions similar to this but I nothing is honestly helping me. How do you redirect with a button click in ReactJs?
Website.js
import React from 'react';
import ReactDOM from 'react-dom';
import { withRouter, useHistory } from 'react-router-dom';
//css imports
import './App.css';
import './SplashPage/splashpage.css';
//File Imports
import Resume from "./Resume/resume.js";
//Component Import
import Button from '#material-ui/core/Button';
function App() {
const history = useHistory()
return (
<div className="App">
{ <div id="cf">
<Button onClick={() => history.push(Resume)}>
CLICK ME
</Button>
</div> }
</div>
);
}
export default App;
I honestly think that I have tried too many options and I've just confused myself even more. From what I understand, the useHistory() function seems to be the correct way to go but as of now I get "TypeError: history is undefined".
Thank you for help!
SOLUTION 1: Without Routing, you can achieve it using multi-entry in webpack and by creating a separate page in your bundle using HTMLWebpackPlugin
entry: {
resume: require.resolve('./path/to/Resume.js'),,
},
output: {
filename: '[name].[contenthash:8].js'
},
plugins: [
// Generates an `index.html` file with the <script> injected.
new HtmlWebpackPlugin(
{
filename: 'resume/index.html',
inject: true,
template: 'SOME_HTML_TEMPLATE,
}
)
),
]
SOLUTION 2 With routing
It is much easier to implement
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route, useHistory } from 'react-router-dom';
//css imports
import './App.css';
import './SplashPage/splashpage.css';
//File Imports
import Resume from "./Resume/resume.js";
//Component Import
import Button from '#material-ui/core/Button';
function App() {
const history = useHistory()
return (
<div className="App">
{ <div id="cf">
<Button onClick={() => history.push('resume')}>
CLICK ME
</Button>
</div> }
</div>
);
}
const Main = () => (
<BrowserRouter>
<Switch>
<Route path="/resume" component={Resume} />
<Route path="/" component={App} />
</Switch>
</BrowserRouter>
)
export default Main;
If you take a look at the documentation of useHistory you will understand the complete cycle of how this works.
Example from docs:
import { useHistory } from "react-router-dom";
function HomeButton() {
let history = useHistory();
function handleClick() {
history.push("/home"); // Here you have to pass the route where you want to redirect
}
return (
<button type="button" onClick={handleClick}>
Go home
</button>
);
}
You can study here: https://reactrouter.com/web/api/Hooks/usehistory
Updated
You were pretty close :)
Here is the solution:
import React from 'react';
import ReactDOM from 'react-dom';
import { withRouter, useHistory } from 'react-router-dom';
//css imports
import './App.css';
import './SplashPage/splashpage.css';
//Component Import
import Button from '#material-ui/core/Button';
function App() {
const history = useHistory()
return (
<div className="App">
{ <div id="cf">
<Button onClick={() => history.push('/resume')}> <-- Here changed; It will redirect to /resume
CLICK ME
</Button>
</div> }
</div>
);
}
export default App;
Index.js
import { StrictMode } from "react";
import ReactDOM from "react-dom";
import { Switch, Route, BrowserRouter as Router } from "react-router-dom";
import App from "./App";
import Resume from "./Resume";
const rootElement = document.getElementById("root");
ReactDOM.render(
<StrictMode>
<Router>
<Switch>
<Route path="/" exact component={App} />
<Route path="/resume" component={Resume} />
</Switch>
</Router>
</StrictMode>,
rootElement
);
Happy coding :)
I have this code, and it is very good working on other environment without webpack.
This is main.js on frontend
import ReactDOM from "react-dom";
import React from "react";
//import { Router, Route, hashHistory } from 'react-router';
import { BrowserRouter, Route } from "react-router-dom";
import App from "./components/App.jsx";
import WizardIndex from "./components/index.js";
ReactDOM.render(
<BrowserRouter>
<App>
<Route path="/signup" component={WizardIndex} />
</App>
</BrowserRouter>,
document.getElementById("mount-point")
);
This is App.jsx
import React from "react";
import { Link } from "react-router-dom";
class App extends React.Component {
render() {
const { children } = this.props;
return (
<div className="App">
<div className="menu-bar">
<div className="menu-item">
<h3>App</h3>
<Link to="/signup">Signup</Link>
</div>
<div className="content">{children}</div>
</div>
</div>
);
}
}
export default App;
And Here I include WizardIndex file index.js
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { Values } from "redux-form-website-template";
import store from "./store";
import showResults from "./showResults";
import WizardForm from "./WizardForm";
class WizardIndex extends React.Component {
render() {
return (
<h1>
Hello!!!React Router
</h1>
);
}
}
export default WizardIndex;
I see Signup link - button on the localhost:8050 But, Why
Why I can not see nothing after I press Signup button
I didnt have any error No in console webpack (there is all green ) Not in console of browser And when I reload the page localhost:8050/signup I get this note in browser but not in consol Cannot GET /signup
I have wrapped my index.js file to support a Redux Store and React-Router-v4.
However, when I try to run a basic test, I get the following error message:
Invariant Violation: You should not use <Route> or withRouter() outside a <Router>
Here is what my index.js looks like:
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
import registerServiceWorker from './registerServiceWorker';
// Redux
import { Provider } from 'react-redux';
import store from "./store/index";
ReactDOM.render((
<Provider store={store}>
<BrowserRouter>
<App />
</BrowserRouter>
</Provider>
), document.getElementById('root'));
registerServiceWorker();
and here is my App.js:
import React, { Component } from 'react';
import { ScaleLoader } from 'react-spinners';
import { withRouter } from 'react-router';
import Header from './components/Header';
import Footer from './components/Footer';
import Main from './Main';
import './styles/styles.scss';
// Redux
import { connect } from 'react-redux';
import store from "./store/index";
import { isLoading } from "./actions/index";
class App extends Component {
constructor() {
super();
store.dispatch(isLoading(true));
}
componentDidUpdate(prevProps) {
if (this.props.location.pathname !== prevProps.location.pathname) {
store.dispatch(isLoading(true));
}
}
render() {
return (
<div className='App'>
<Header />
<div className='App__wrapper'>
<div className={'loading-spinner ' + (this.props.isLoading ? null : '--hide-loader')}>
<ScaleLoader
color={'#123abc'}
loading={this.props.isLoading}
/>
</div>
<Main />
</div>
<Footer />
</div>
);
}
}
const mapStateToProps = (state) => ({ isLoading: state.isLoading });
export default withRouter(connect(mapStateToProps)(App));
Since I'm using withRouter to wrap for navigation, is this method discouraged? Should I be setting up withRouter at the index.js level?
Thank you!
Try importing your BrowserRouter like this:
import { BrowserRouter as Router } from 'react-router-dom'
Then replace everywhere it appears BrowserRouter with Router instead.