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;
Related
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;
Hi i am a new one in react. Trying routing and have some problems - empty main page. Dont understant whats the problem. React router dom version is "react-router-dom": "^6.2.1".
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
App.js
import {BrowserRouter, Routes, Route} from 'react-router-dom';
import logo from './logo.svg';
import './components/fonts/fonts.css';
import Cover from './components/cover/cover.jsx';
import FormRecal from './components/formRecal/form-recal.jsx';
import Header from './components/header/header.jsx';
import SecServises from './components/secServises/sec-servises.jsx';
import SecStory from './components/secStory/sec-story.jsx';
import SecPrice from './components/secPrice/sec-price.jsx';
import SecBot from './components/secBot/sec-bot.jsx';
import Footer from './components/footer/footer.jsx';
import './components/mediaScreen.css';
const App = () => {
return (
<div>
<Cover/>
<FormRecal/>
<Header/>
<SecServises/>
<SecStory/>
<SecPrice/>
<SecBot message1='I have been involved with this comapny for ages and just want to say this is a great work by designcoon.' name1='DJ Bravo - Frequent Travelera' message2='I have been involved with this comapny for ages and just.' name2='DJ Bravo - Frequent Travelera'/>
<Footer/>
<BrowserRouter>
<Routes>
<Route path="/" element={<Cover/> } />
</Routes>
</BrowserRouter>
</div>
);
}
export default App;
build successful but no output here is the git repo link https://github.com/ganu123/my-project
I am new in react js please help
I saw the repo and found you didn't wrap your app with Router as you're using Routes
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<React.StrictMode>
<BrowserRouter>
<App />
</BrowserRouter>
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
App.js
import './App.css';
import {Route} from "react-router-dom";
// HOC
import DefaultHOC from './HOC/Default.HOC.js';
import { Switch } from "react-router-dom";
// Component
import Temp from './components/temp';
function App() {
return (
<Switch>
<DefaultHOC path="/" exact component= {Temp}/>
</Switch>
);
}
export default App;
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.
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';