React router can't match any route and always shows last (NotFound) component. Everything works fine if I use BrowserRouter from 'react-router-dom' instead of Router. But I have to use Router because I have to use custom history (for which I am using history library). Heres my code.
import { Router, Route, Switch } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import ExpenseDashboardPage from '../components/ExpenseDashboardPage';
import AddExpensePage from '../components/AddExpensePage';
import EditExpensePage from '../components/EditExpensePage';
import HelpPage from '../components/HelpPage';
import NotFound from '../components/NotFound';
import Header from '../components/Header';
import LoginPage from '../components/LoginPage';
export let history = createBrowserHistory();
function AppRouter() {
return (
<div>
<Router history={history}>
<Header />
<Switch>
<Route path="/" component={LoginPage} exact={true} />
<Route path="/dashboard" component={ExpenseDashboardPage} />
<Route path="/create" component={AddExpensePage} />
<Route path="/edit/:id" component={EditExpensePage} />
<Route path="/help" component={HelpPage} />
<Route component={NotFound} />
</Switch>
</Router>
</div>
);
}
export default AppRouter;
It looks like react-router-dom version 5.x is not compatible with history version 5.0.0. I switched to history version 4.x and now its working as expected.
I know this doesn't fit the question but in my case, i included a different component in Switch component. Switch component should only have Route components in them.
Related
I'm working on my portfolio. I'm trying to put all components (Home, Skills, Projects, Contact) on one page, so I'm not planning to set routes for those component. However I want to set a route for project detail component, which I'll put a link on Projects component. I also want to set a route for 404 page.
I wrote the following code but it doesn't know ProjectDetail page when I access http://localhost:3000/projects. Can you give me advice how I can fix the problem?
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './Home';
import Skills from './Skills';
import Projects from './Projects';
import ProjectDetail from './ProjectDetail';
import Contact from './Contact';
import Error from './Error';
const App = () => {
return (
<>
<Router>
<Home />
<Skills />
<Projects />
<Contact />
<Routes>
<Route path='/projects' element={<ProjectDetail />} />
<Route path='*' element={<Error />} />
</Routes>
</Router>
</>
);
};
export default App;
I think you need to wrap all the components that u want in one page and put it on a route like this: <Route path="/" element={<OnePageApp/>}/>
After this i don't see any other errors.
Good Luck, I hope i have been able to help you
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './Home';
import Skills from './Skills';
import Projects from './Projects';
import ProjectDetail from './ProjectDetail';
import Contact from './Contact';
import Error from './Error';
const App = () => {
return (
<>
<Router>
<Home />
<Skills />
<Projects />
<Contact />
<Routes>
<Route path='/projects' element={ProjectDetail} />
<Route path='*' element={Error} />
</Routes>
</Router>
</>
);
};
export default App;
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
Since 3 days i am working on react route but its not working..I
I dont know where i am doing wrong even simple route is not working...if simple routing(without params) work then i wanted to pass ID to the NEW component..
But i am able to pass ID optionally ..IF i remove ? then routing doesnt works.. I have tried using switch and exact too..
And One More issue is by passing ID optionally i am getting Undefined in New Component Page During render (First time)..So i wanted to pass ID:1 from router .Please help me out...Thanks
<Route name="ideas" path="/Hello" component={New} /> (Not Working)
<Route name="ideas" path="/:Hello" component={New} /> (Not working)
<Route name="ideas" path="/New/:Hello?" component={New} />(Not working)
<Route name="ideas" path="/" component={New} /> {Working}
<Route name="ideas" path="/:Hello?" component={New} /> (working)
import React from 'react';
import ReactDOM from'react-dom'
import New from './New'
import Demo from "./demo";
import {
BrowserRouter as Router,
Route,
Switch,
} from 'react-router-dom'
function App() {
return (
<div>
<Router>
<Route name="ideas" path="/Hello" component={New} />
</Router>
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById("root")
);
export default App;
I updated your codesandbox. You were not using Switch from react-router-dom. Which is necessary when dealing wit routes. Please check updated codesandbox.
Use it in following way
import React from "react";
import ReactDOM from "react-dom";
import New from "./New";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
function App() {
return (
<div>
<Router>
<Switch>
<Route name="ideas" path="/Hello" component={New} />
</Switch>
</Router>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));
You can also have a look at https://codesandbox.io/s/smoosh-currying-8job8.
Updated version of your code:
https://codesandbox.io/s/unruffled-hellman-2f19h
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