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
Related
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'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.
react route path is not working
it shows only product component in all URL
I Have instilled react-router-dom, and also import BrowserRouter as Router,
Switch,
Route,
Link
What is the problem? I can not figure it out.
import React from 'react';
import Navbar from './component/Navbar/Navbar';
import Product from './component/Product/Product';
import {BrowserRouter as Router,Switch,Route,Link} from "react-router-dom";
import UpComing from './component/UpComing/UpComing';
import NotFound from './component/NotFound/NotFound';
import OrderReview from './component/OrderReview/OrderReview';
function App() {
return (
<div className="App">
<Navbar></Navbar>
<Router>
<Switch>
<Route to="/product">
<Product></Product>
</Route>
<Route to="/OrderReview">
<OrderReview></OrderReview>
</Route>
<Route exact to="/">
<Product></Product>
</Route>
<Route to="*">
<NotFound></NotFound>
</Route>
</Switch>
</Router>
</div>
);
}
export default App;
You should be using path instead of to on your routes. to is used for Link components. I've created a minimal representation of your code working on codesandbox
https://codesandbox.io/embed/react-router-playground-g0uzc?fontsize=14&hidenavigation=1&theme=dark
I'm a beginner in React and I'm learning how to route. My page changes urls, but the view turns to a blank page. My index page is working fine. I don't have any console errors.
In Router.js
import React from "react";
import {
BrowserRouter,
Route,
Switch,
} from "react-router-dom";
import App from './App'
import SinglePriceGrid from './component/SinglePriceGrid'
function Router() {
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={App} />
<Route path="/single-page-grid" component={SinglePriceGrid} />
</Switch>
</BrowserRouter>
)
}
export default Router
In SinglePriceGrid.js
import React from 'react';
import '../css/SinglePriceGrid.css'
class SinglePriceGrid extends React.Component {
render() {
return (
<div className="SinglePriceGrid">
<h1>Hello Single Price Grid!</h1>
</div>
);
}
}
export default SinglePriceGrid;
edit: Added the imports I used
edit: Readded the Switch, but it did not solve the problem
keep the Routes inside Switch. Try this
import React from "react";
import {
BrowserRouter,
Route,
Switch,
} from "react-router-dom";
import App from './App'
import SinglePriceGrid from './component/SinglePriceGrid'
function Router() {
return (
<BrowserRouter>
<Switch>
<Route exact path="/" component={App} />
<Route path="/single-page-grid" component={SinglePriceGrid} />
</Switch>
</BrowserRouter>
)
}
export default Router
I'm really sorry, but the error is really humiliating. My path is wrong. I used "page" instead of "price" for the endpoint.
React Router is changing the url but is not loading the component.
And once the url is changed and if the page gets refreshed, the correct component corresponding to the url is shown.
This is the code :
import React from "react";
import { Route, Switch } from "react-router-dom"
import { Link, BrowserRouter as Router } from 'react-router-dom'
import {Home} from '../src/Views/Home';
import {Test} from './Views/Home';
import App from '../../../src/App'
const Root = () => (
<Router>
<Switch>
<Route exact path="/" component={Home}/>
<Route exact path="/test" component={Test} />
</Switch>
</Router>
);
export default Root;
There are no console errors.