I'm running into an issue where my React components are just not being bootstrapped into the page, but no error messages are showing up so I don't know what's going on. I don't believe that the issue is with the CalcList.js or Calculator.js files, since I've been able to render them without any issue in a single-page (i.e. not using react-router) context.
Implemented using the index.js and App.js parents below, when I visit I just get an empty page without any feedback from the console.
index.js
import React from 'react';
import {render} from 'react-dom';
import {Router, Route, Link, IndexRoute, browserHistory} from 'react-router';
import App from './App';
import {Calculator} from './Calculator';
import {CalcList} from './CalcList';
render ((
<Router history={browserHistory}>
<Route path="/" component={App}>
<IndexRoute component={CalcList} />
<Route path="/calculator/:num" component={Calculator} />
</Route>
</Router>
), document.getElementById('root'));
App.js
import React, { Component } from 'react';
import {render} from 'react-dom';
import {Router, Route, IndexRoute, hashHistory} from 'react-router';
import CalcList from './CalcList';
import Calculator from './Calculator';
export default class App extends Component {
render() {
var children = React.Children.map(this.props.children, function(child) {
return React.cloneElement(child);
});
return (
<div id="app">
{children}
</div>
);
}
}
Your already defining the default export in your components so the following lines are incorrect in index.js:
import {Calculator} from './Calculator';
import {CalcList} from './CalcList';
change to this:
import Calculator from './Calculator';
import CalcList from './CalcList';
Alternatively, You could create an object that exports those components like this:
components.js:
import Calculator from './Calculator';
import CalcList from './CalcList';
export {
Calculator,
CalcList
}
and then your original imports would work like this:
import { Calculator, CalcList } from './components';
Related
I encountered this error while using react-router-dom.
error image
An error occurs when using the react router dom, and it operates normally when not using it.
Here is my code
import React from 'react';
import { HashRouter, Route } from 'react-router-dom';
import './App.css';
// import Home from './routes/Home'
//import About from './routes/About'
function App(){
return (
<HashRouter>
<Route />
</HashRouter>
)
}
export default App;
When importing HashRouter and Route, there is no error, but when using as follows, there is an error at the top.
please help me
I've been spending three hours here
I think you want to use Routes, rather than HashRouter
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import './App.css';
// import Home from './routes/Home'
//import About from './routes/About'
function App(){
return (
<Routes>
<Route />
</Routes>
)
}
export default App;
I'm asking you why you using hashRouter , are you sure about using it , though it's not recommended , check: https://reactrouter.com/docs/en/v6/routers/hash-router
You can use browser router replacing hashrouter
import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<BrowserRouter>
{/* The rest of your app goes here */}
</BrowserRouter>,
root
);
I am trying to learn react, but I am stuck with react render dom which doesn't want to render my page.
My App.js
import React from 'react';
import { Route } from 'react-router-dom';
import './App.css';
import HomePage from './pages/homepage/homepage.component.jsx';
function App() {
return (
<div>
<Route exact path='/' component={ HomePage }/>
</div>
);
}
export default App;
And my index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
React Router v6 doesn't support exact anymore because all paths are match exactly by default. And component changes to element in v6. You need also to import Routes from react-router-dom.
Finaly, HomePage must be <HomePage/>
import React from 'react';
import { Route, Routes } from 'react-router-dom';
import './App.css';
import HomePage from './pages/homepage/homepage.component.jsx';
function App() {
return (
<Routes>
<Route path='/' element={ <HomePage/> }/>
</Routes>
);
}
export default App;
I have tried everything I fixed all the warning, removed the / before static , I tried with putting the homepage address but when I run the index.html it only show the blank page. In inspect element there is nothing in root div. I don't know what I am doing wrong can any one please help me out
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
AND the app file is-
import React,{Component} from 'react';
// import logo from './logo.svg';
import './App.css';
import './assets/css/style.css';
import './assets/css/bootstrap.min.css';
import './assets/css/fontawsome.css';
import './assets/css/skin.css';
import './assets/css/ionicons.min.css';
import 'antd/dist/antd.css';
//Customer
import Customer from './components/admin/customer/Customer';
import NewCustomer from './components/admin/customer/NewCustomer';
import Dashboard from './components/admin/Dashboard';
import Login from './components/auth/Login';
import {ProtectedRoute} from "./components/auth/protected.route";
import { Route, BrowserRouter as Router } from 'react-router-dom';
require('dotenv').config()
class App extends Component {
constructor(props) {
super(props);
}
render(){
return (
<div className="App">
<Router>
<ProtectedRoute exact path="/" component={Dashboard} />
<Route path="/login" component={Login} />
<ProtectedRoute exact path="/customer" component={Customer} />
</Router>
</div>
);
}
}
export default App;
I am a beginner in React and trying to understand routing. I have created a learning project and want to render three different components each with a different path. However, all the paths result in the display of the App component.
I've tried finding solutions on multiple sources, but not able to figure out the issue! Please have a look. Thanks in advance.
Root.jsx
import React, { Component } from 'react';
import { Router } from 'react-router';
import { Redirect, Route, Switch } from 'react-router-dom';
import ScreensList from './List';
import ScreensWeather from './Weather';
import App from '../App';
const ScreensRoot = () => (
<Router>
<Switch>
<Route exact path='/' component={App}/>
<Route path="/list" component={ScreensList} />
<Route path="/weather" component={ScreensWeather} />
</Switch>
</Router>
);
export default ScreensRoot;
App.js
import React, {Component} from 'react';
import './App.css';
class App extends React.Component {
render(){
return (
<div>
Hello from App!
</div>
)
}
}
export default App;
List.jsx
import React from 'react';
import List from '../components/List';
const ScreensList = () => (
<div>
<List/>
</div>
);
export default ScreensList;
List.jsx
import React from 'react';
const List = (
<div>Hello from List Component!</div>
);
export default List;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import './screens/Root';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
1.Insted of
import { Router } from 'react-router';
use
import { BrowserRouter as Router } from "react-router-dom";
2.change
const List = (
<div>Hello from List Component!</div>
);
to
const List = () => (
<div>Hello from List Component!</div>
);
3. As others mentioned
ReactDOM.render(<ScreensRoot />, rootElement);
Temporary codesandbox
As far as I can see, you've defined a ScreensRoot component but you're not using anywhere. Assuming you want that to be the actual root of your project, then in your index.js you must use it instead of App:
ReactDOM.render(<ScreensRoot/>, document.getElementById('root'));
(Note that you'll need to import ScreensRoot in your index.js in order for this to work).
i have used every peace of solution that were available in this forum,
installed new dependency... but still getting the error.
this on is my index file.
'''
import React from "react";
import ReactDOM from "react-dom";
import {BrowserRouter} from 'react-router-dom';
import "./index.css";
import App from "./App";
import registerServiceWorker from "./registerServiceWorker";
import "bootstrap/dist/css/bootstrap.css";
import "font-awesome/css/font-awesome.css";
import { O_RDWR } from "constants";
ReactDOM.render(<BrowserRouter> <App /> </BrowserRouter>, document.getElementById("root"));
registerServiceWorker(); '''
and this one is the app file
'''
import React, { Component } from "react";
import { BrowserRouter ,Router,Route,Redirect,Switch } from 'react-router-dom';
import Movies from "./components/movies";
import Customer from './components/customer';
import Rental from './components/rental';
import NotFound from './components/notFound';
import "./App.css";
class App extends Component {
render() {
return (
<Router>
<main className="container">
<Route path="/movies" component={Movies} ></Route>
<Route path="/customer" component={Customer}></Route>
<Route path="/rental" component={Rental}></Route>
<Route path="/notFount" component={NotFound}></Route>
</main>></Router>
);
}
}
export default App;
You don't need to surround your routes with Router if you already have your App surrounded in your index.js file.
i found the answer of my question...
i have just closed my <App /> in index.jsx in curly braces like this
ReactDOM.render(<BrowserRouter>{ <App />} </BrowserRouter>, document.getElementById("root"));
and it workef for me.i don't know what is logic behind this.