This question already has answers here:
Upgrading react-router-dom from Switch to Route
(1 answer)
React App goes blank after importing React-Router-Dom
(3 answers)
Closed last month.
I want to use React Router but it keeps showing me a blank page. Here is my code:
Routering.js
import React from 'react'
import { HashRouter as Router,Routes,Route } from 'react-router-dom';
import App from './components/app.js'
import Login from './components/login.js'
import NotFound from './components/NotFound.js';
const Routering = ()=> {
<Router>
<Routes>
<Route path="/login" element={Login}/>
<Route element={NotFound}/>
<Route exact path="/" element={App}/>
</Routes>
</Router>
}
export default Routering;
index.js:
import { createRoot } from 'react-dom/client';
import React from 'react';
import ReactDOM from 'react-dom';
import Routering from './Routering.js';
import Login from './components/login.js';
import App from './components/app.js';
import './css/app.scss';
createRoot(document.getElementById('root')).render( <Routering />)
I am using "React Router V6", can anyone tell me what is the problem? Thanks for all the helpers.`
In the element, you should have <Login /> and <App />, etc.
Related
Im routing a page to the root, but its showing up as a blank page, no matter what js file I use. Not sure whats wrong, havent used react since last year but looks like they've updated react-router-dom so it doesnt use Switch anymore. Anyone know the correct syntax so the page shows up? Here are the files:
WebRoutes.js
import React from "react";
import { Routes, Route } from 'react-router-dom';
import { useNavigate } from "react-router-dom";
// Webpages
import App from './App';
import Welcome from './welcome';
import SignUp from './Signup'
export default function WebRoutes() {
return (
<Routes>
<Route path='/'>
<Welcome />
</Route>
</Routes>
);
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import WebRoutes from './WebRoutes';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<WebRoutes />
</React.StrictMode>,
document.getElementById('root')
);
In react-router-dom#6 the Route components don't render routed content as children, they use the element prop. Other Route components are the only valid children of a Route in the case of building nested routes.
export default function WebRoutes() {
return (
<Routes>
<Route path='/' element={<Welcome />} />
</Routes>
);
}
Ensure that you have rendered a router around your app.
import { BrowserRouter as Router } from 'react-router-dom';
ReactDOM.render(
<React.StrictMode>
<Router>
<WebRoutes />
</Router>
</React.StrictMode>,
document.getElementById('root')
);
This question already has an answer here:
Why I receive blank page? React
(1 answer)
Closed 10 months ago.
So I've check multiple posts and websites and I can't get it to work. It just renders a white screen with a the navbar.
This is the code:
App.js:
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom'
function App() {
return (
<Router>
<Nav/>
<Routes>
<Route path='/about' element={About}/>
</Routes>
</Router>
);
}
export default App;
Index.js:
ReactDOM.render(<React.StrictMode><App/></React.StrictMode>, document.getElementById('root'))
Some component:
<Link to="/about" className="btn btn-colored">Launch</Link>
The 'About' component is working cause I've tested and imported into App.js so that is not the problem.
You need to first import the component you want to render
For example you want to render About component so you would import the About component
Import the component
import About from "./pages/About";
Fix the syntax as in react-jsx we write it in </> brackets.
<Route path='/about' element={} />
I've tried browsing a few similar queries but haven't been able to solve my issue. I downloaded a template (am new to React) where the single-page application was entirely built in App.js. I've since been trying to add functionality to add additional pages - but keep getting the error "React Router: Cannot read property 'pathname' of undefined."
My App.js
import React from 'react'
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import Mint from './components/pages/Mint'
import LandingPage from './components/pages/LandingPage'
const App = () => {
return (
<Router>
<Routes>
<Route exact path="/" element={<Mint/>}/>
<Route path="/home" element={<LandingPage/>}/>
</Routes>
</Router>
);
}
export default App;
My index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import store from "./redux/store";
import { Provider } from "react-redux";
import { BrowserRouter } from "react-router-dom";
import { ConnectedRouter } from 'react-router-redux';
import "./styles/reset.css";
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById("root")
);
reportWebVitals();
Can confirm upon loading that the "Mint" page loads properly. But if I try and switch the exact path to LandingPage in App.js it'll give that error.
Any help would be greatly appreciated!
I haven't imported action anywhere and it says 'Action' is not exported from 'history'. I don't even know what action is.
info: I reinstalled the previous version of history as I was having problems with routing when my history was updated
Here is my code:
import React from 'react';
import { render } from 'react-dom';
import './App.css';
import Navbar from "./components/Navbar/Navbar";
import Home from './components/Pages/Home';
import Intro from './components/Pages/Intro';
import LogIn from './components/Pages/LogIn';
import SignUp from './components/Pages/SignUp';
import Recomendations from './components/Pages/Recomendations';
import Reviewed from './components/Pages/Reviewed';
import AboutUs from './components/Pages/AboutUs';
import Bookmarks from './components/Pages/Bookmarks';
import Error from './components/Pages/Error';
import { Router, Switch, Route } from 'react-router-dom';
function App() {
return (
<div>
<Navbar />
<Router>
<Route exact path='/' component={Intro} />
<Route path='/intro' component={Intro} />
<Route path='/error' component={Error} />
</Router>
</div>
);
}
export default App;
Check the version of history package, and make sure it is somewhat recent. Someone else had a similar problem: Getting error when try to use React Router v6: Attempted import error: 'Action' is not exported from 'history'
I have just started using React and have created a new project using create-react-app. I have made a homepage which works. However, I want to add another page to this application. I have a button on the homepage which I want to redirect to another page when clicked. Can someone please give a simple explanation to do this?
I do know that there are other questions that ask this, but they don't seem to apply to create-react-app, or I don't understand them since I am just starting out with React.
Here is my index.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { Route, BrowserRouter as Router } from 'react-router-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render((
<Router>
<Route path = "/" component = {App} />
</Router>
), document.getElementById('root'));
registerServiceWorker();
You need to use react-router-dom library. Navigation between pages is really easy in react.
import React from 'react';
import {render} from 'react-dom';
import {Router, Route, hashHistory, BrowserRouter} from 'react-router-dom'
render((
<BrowserRouter basename="/" history={hashHistory}>
{routes()}
</BrowserRouter>
), document.getElementById('app'));
Then in your home page, you can have something similar to below page:
import React, { Component } from 'react';
import { Switch, Route, BrowserRouter, hashHistory } from 'react-router-dom';
import './MainLayout.css';
import ReportNavComponent from './ReportNavComponent';
import ListOfUsers from '../reports/ListOfUsers/ListOfUsers';
import ListOfProviders from '../reports/ListOfProviders/ListOfProviders';
import ListOfDiagnosis from '../reports/ListOfDiagnosis/ListOfDiagnosis';
import ListOfNewPatients from '../reports/ListOfNewPatients/ListOfNewPatients';
import NumberOfAdmissions from '../reports/NumberOfAdmissions/NumberOfAdmissions';
...
<div className="reportContent">
<Switch>
<Route path="/ListOfUsers" component={ListOfUsers} />
<Route path="/ListOfProviders" component={ListOfProviders} />
<Route path="/ListOfDiagnosis" component={ListOfDiagnosis} />
<Route path="/ListOfNewPatients" component={ListOfNewPatients} />
<Route path="/NumberOfAdmissions" component={NumberOfAdmissions} />
<Route component={ListOfUsers} />
</Switch>
</div>
reacter-router-dom is the way to go about routing. But if you have just started with react, why don't start with a boiler-plate project and see how the components and other entities interact?
You should definitely look at davezuko's react-redux starter kit and experiment with it.