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;
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;
Trying to use React Router and I keep getting an error that my Route must be inside a Router, even though it already is. I've already tried running npm install again, and removing and readding the react router npm package. The error message is
Invariant failed: You should not use <Route> outside a <Router>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import { BrowserRouter as Router } from 'react-router-dom';
ReactDOM.render(
<Router>
<React.StrictMode>
<App />
</React.StrictMode>
</Router>,
document.getElementById('root')
);
app.js
import logo from './logo.svg';
import './App.css';
import Main from './Components/Main/main';
import {BrowserRouter, Route,Link } from 'react-router-dom';
function App() {
return (
<div className="App">
<Route exact path='/'>
<Main />
</Route>
</div>
);
}
export default App;
main.js
export default function Main(props) {
const [anim,setAnim] = useState(false);
return (
<MainSection>
</MainSection>
)
}
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.
Below is my index.js file:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './containers/App';
import './styles/bootstrap.css';
import './styles/font-awesome.css';
import './styles/index.css';
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>
, document.getElementById('root')
);
What is causing the error in the title?