I'm still learning to using react-router. I just wondering why my page is blank.
App.js :
import {
BrowserRouter as Router,
Routes,
Route
} from "react-router-dom";
export default function App() {
return (
<Router>
<Routes>
<Route exact path="/" element={<MainPage/>}/>
</Routes>
</Router>
);
}
React Router v6 doesn't support exact anymore because all paths are match exactly by default
<Route path="/" element={<MainPage/>}/>
You have to import MainPage from its path.
import MainPage from "layouts/pages/index";
Like this.
Related
I used nested routing using react-router-dom but the nested component only renders a white screen when go to the /taste url.
I'm using react-router-dom#5.3.0
<App> -> <Tasts_Main> -> <Taste_taste-screen>
i usually use v6, but reading Docs of v5 you need to specify your history to navigate. I had to add my history to make this work, also using exact prop inside my Route and it works well
Try this in your App.js:
import {Route, Router} from "react-router";
import { createBrowserHistory } from "history";
function App() {
const customHistory = createBrowserHistory();
return (
<Router history={customHistory}>
<div>
<Route exact path="/">
<Home />
</Route>
<Route path="/login">
<Login/>
</Route>
</div>
</Router>
);
}
Source: https://v5.reactrouter.com/web/api/Router/history-object
I am trying to implement a dynamic route from my app.js.
I have 2 pages. HomePage.js and ReportPageLayout.js.
When I try to navigate from HomePage to ReportPage, I am getting a status= cancelled.
Image of Network tab
When i refresh the page in the browser, the data is fetched and rendered.Image status=200 and component rendered on dom
Here is my app.js file
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Homepage from './pages/Homepage';
import ReportPage from './pages/ReportPageLayout';
export default function App() {
return (
<div className="App">
<Router>
<Switch>
<Route exact path="/" component={Homepage} />
<Route path="/:id" component={ReportPage} />
</Switch>
</Router>
</div>
);
}
Please help. Thank you in advance.
As far as I know (not that much), in router-dom v5 you should nest the target component and not as an argument
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Homepage from './pages/Homepage';
import ReportPage from './pages/ReportPageLayout';
export default function App() {
return (
<Fragment>
<Switch>
<Route exact path="/">
<Homepage/>
</Route>
<Route path="/:id">
<ReportPage/>
</Route>
</Switch>
</Fragment>
);
}
Furthermore, if you use suspense or importing data from, you should always create a fallback.
I had the same thing here
Delay in loading the array crushs the app
I am a beginner in react and i am using routes for basic routing of components on my homepage
This is the code on my homepage component but still it shows nothing on my webpage when I run the server
import React,{ Component } from "react";
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import { BrowserRouter as Router, Switch, Route, Link, Redirect, Routes } from "react-router-dom";
export default class HomePage extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Router>
<Routes>
<Route exact path='/' element={ <HomePage/> }><h1>This is the home page</h1></Route>
<Route exact path='/join' element={ <RoomJoinPage/> }></Route>
<Route exact path='/create' element={ <CreateRoomPage/> } ></Route>
</Routes>
</Router>
</div>
);
}
}
I have used webpack configurations to create the app as I am using react and Django. When I searched for solution on stack somebody commented on a post as if you are using webpack configurations for manually setting up the project it requires devServer : {historyApiFallback: true,} for react routes to work so what should I do please help me I've been stuck on this part from last two days If the above solution is right then please let me know where to write that following statement to make the react routes work...
I see you are using Browser Router as Router. One thing I would try is to use BrowserRouter without using as Router, just like this <BrowserRouter> </BrowserRouter>.
Another thing that I would try is to use HashRouter instead of BrowserRouter, and use it in the file index.js like this:
ReactDOM.render(
<React.StrictMode>
<HashRouter>
<App />
</HashRouter>
</React.StrictMode>,
document.getElementById('root')
);
And your HomePage file should look like this:
import React,{ Component } from "react";
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import { Switch, Route, Link, Redirect, Routes } from "react-router-dom";
export default class HomePage extends Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
<Routes>
<Route exact path='/' element={ <HomePage/> }><h1>This is the home page</h1></Route>
<Route exact path='/join' element={ <RoomJoinPage/> }></Route>
<Route exact path='/create' element={ <CreateRoomPage/> } ></Route>
</Routes>
</div>
);
}
}
If anything of this works, please share the version of react router dom and react if it's possible. Previously I also had problems of this style with RRD.
For both path react render only landing component.
for path '/' and for path '/home' also. router render only landing component.
import {Route, BrowserRouter, Switch, HashRouter} from 'react-router-dom'
import Layout from './pages/Layout'
import './style/style.css';
import Landing from './pages/Landing';
function App() {
return (
<>
<HashRouter>
<Switch>
<Route path='/'><Layout/></Route>
</Switch>
<Switch>
<Route exact path="/land"><Landing/></Route>
</Switch>
</HashRouter>
</>
);
}
export default App;
Probably the reason is that you use 2 Switch components, use one instead
React-Router appears to be working in my app except for the fact that I am getting a blank page instead of my component, even though it is directed to the proper path.
I'm scanning the documentation but I can't resolve the issue on my own after looking it over and searching Google/this site.
I had tried...
Making it so that the router.js file just contained the routes only to get the same results. Specifying exact path as well when doing so.
Reinstalling react-router-dom into the component in case there was an error when it downloaded.
Removing the provider in case that was the issue
Placing the code in the router file directly in the App.js file between the provider component tags
These are the files involved.
Router.js
import React from 'react';
import {Route, Switch, Redirect} from 'react-router-dom';
import LandingPage from '../scenes/LandingPage';
import CityPage from '../scenes/CityPage';
const Router = () => {
return (
<Switch>
<Redirect from='/' to='/landing' />
<Route path='/landing' component={LandingPage} />
<Route path='/citypage' component={CityPage} />
</Switch>
);
}
export default Router;
App.js
import React from "react";
import { BrowserRouter } from "react-router-dom";
import Router from "./services/Router";
import ChosenCityContextProvider from "./services/context/ChosenCityContext";
const App = () => {
return (
<BrowserRouter>
<ChosenCityContextProvider>
<Router />
</ChosenCityContextProvider>
</BrowserRouter>
);
};
export default App;
No error messages accompany the rendering of the site. Aside from the blank page, everything else appears to be working. In the React Dev tools, it states that the Router.Consumer has an object which is revealed to empty when expanded.
What is wrong with my code?
https://codesandbox.io/s/youthful-maxwell-rch1k?fontsize=14
Above is sandbox of code. I have the same issue here
I'm not certain why exactly this fixes the issue, but I've run into this on a work project so knew it worked.
If you add exact into the redirect element it forces the correct behavior.
import React from 'react';
import {Route, Switch, Redirect} from 'react-router-dom';
import LandingPage from '../scenes/LandingPage';
import CityPage from '../scenes/CityPage';
const Router = () => {
return (
<Switch>
<Redirect exact from='/' to='/landing' />
<Route path='/landing' component={LandingPage} />
<Route path='/citypage' component={CityPage} />
</Switch>
);
}
export default Router;
I tried this and it worked. I'm not sure why before it didn't. If anyone has an explanation please let me know because I am trying to learn what I did wrong initially.
<Route render={() => <Redirect from='/' to='/landing' />} />
I added the above, so my router file looked like this.
import React from 'react';
import {Route, Switch, Redirect} from 'react-router-dom';
import LandingPage from '../scenes/LandingPage';
import CityPage from '../scenes/CityPage';
const Router = () => {
return (
<Switch>
<Route path='/landing' component={LandingPage} />
<Route path='/citypage' component={CityPage} />
<Route render={() => <Redirect from='/' to='/landing' />} />
</Switch>
);
}
export default Router;
#DLowther has also showed me another solution
import React from "react";
import { Route, Switch, Redirect } from "react-router-dom";
import Page from "./Page";
import Home from "./Home";
const Router = () => {
return (
<Switch>
<Redirect exact from="/" to="/home" />
<Route path="/home" component={Home} />
<Route path="/page" component={Page} />
</Switch>
);
};
export default Router;
I would like to credit this individual for answering my question