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
Related
I am new to react and have been struggling with the router for a crud application, attaching the app.js file and the console errors. CodeSandbox
import './App.css';
import AddUser from "./components/AddUser";
import Navbar from "./components/navbar";
import CrudApp from "./components/CrudApp";
import AllUsers from "./components/AllUsers";
import{ Routes, Route} from "react-router-dom";
import {BrowserRouter as Router} from "react-router-dom";
function App() {
return (
<div>
<Router>
<Navbar />
<Routes>
<Route path='/add'>
<AddUser/>
</Route>
<Route path='/all'>
<AllUsers />
</Route>
<Route path='/'>
<CrudApp />
</Route>
</Routes>
</Router>
</div>
);
}
export default App;
This is the error image
I have been trying to find a solution for this.
Navbar, Home, Services, Contactus are different components that render fine when I don't user the Route method. They also render fine within the BrowserRouter tags. But when I try to place them within the Route tags, the whole screen goes blank
import Contactus from './Contactus';
import Navbar from './Navbar';
import Home from './Home';
import Services from './Services';
import {BrowserRouter as Router, Switch, Route, Link} from 'react-router-dom';
import React, { Component } from 'react';
function App() {
return (
<div className="App">
<h1>This is React Router</h1>
<Router>
<Navbar/>
<Route path="/home" Component={Home} exact />
<Route path="/services" Component={Services} exact />
<Route path="/contactus" Component={Contactus} exact />
</Router>
</div>
);
}
export default App;
What am I doing wrong?
I have managed to fix this. The library installed was react-router-dom v6 but the coding was done for earlier versions. Below are the changes I made and its now working.
Fixes -
All the <Route> lines need to be enclosed within a <Routes> block
For some reason, component is not being accepted as a parameter in the new version so essentially component={Home} is now replaced by element={<Home/>}
And of course, we now need to import Routes also from react-router-dom
import logo from './logo.svg';
import './App.css';
import Contactus from './Contactus';
import Navbar from './Navbar';
import Home from './Home';
import Services from './Services';
import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
import React from 'react';
function App() {
return (
<div className="App">
<h1>This is React Router</h1>
<Router>
<Navbar/>
<Routes>
<Route path="/home" element={<Home/>} exact />
<Route path="/services" element={<Services/>} />
<Route path="/contactus" element={<Contactus/>} />
</Routes>
</Router>
</div>
);
}
export default App;
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 don't understand why I am getting blank page even after changing Switch to Router, can anyone help to fix?
App.js:
import './App.css';
import React from 'react'
import Form from './Components/Form';
import Person from './Components/Person'
import 'bootstrap/dist/css/bootstrap.min.css';
import Headers from './Components/Header';
import {
BrowserRouter as Router,
Routes,
Route
} from "react-router-dom";
function App() {
return (
<Router>
<div>
<Headers></Headers>
Welcome to home
<Routes>
<Route path="/form" element={<Form />}>
</Route>
<Route path="/person" element={<Person />}>
</Route>
<Route path="/" element={<App />}>
</Route>
</Routes>
</div >
</Router>
)
}
export default App;
When I checked console log:
Uncaught Error: You cannot render a inside another .
You should never have more than one in your app.
You're nesting the router as you're rendering <Route path="/" element={<App />}>. That's why you're getting the error.
I suggest you create another component (e.g. Home) to render for the root path. Take a look at the documentation.
I have a component that imports a Router and it isn't working and there isn't any error message. The pages aren't appearing on the browser. It is a course s' app. Because of the fact that this course is a bit old, some things could be overpast. Here are the codes of my components:
import '../common/template/dependencies'
import React from 'react'
import Routes from './Routes'
export default props => (
<div className='wrapper'>
<div className='content-wrapper'>
<Routes />
</div>
</div>
)
The component Routes.js that does the routing:
import React from 'react'
import {Router, Route , Redirect, hasHistory} from 'react-router'
import Dashboard from '../dashboard/Dashboard'
import BillingCycle from '../billingCycle/BillingCycle'
export default props => (
<Router history={hasHistory}>
<Route path='/' component={Dashboard} />
<Route path='/billingCycles' component={BillingCycle} />
<Redirect from='*' to='/' />
</Router>
)
When I comment this line of the component above, everything works well.
{/*<Routes />*/}
import React from 'react'
import {BrowserRouter as Router, Route, Redirect, Switch} from 'react-router-dom';
import Dashboard from './DashBoard';
import BillingCycle from './BillingCycle'
export default props => (
<Router>
<Switch>
<Route exact path='/' component={Dashboard}/>
<Route exact path='/billingCycles' component={BillingCycle}/>
<Redirect from='*' to='/'/>
</Switch>
</Router>
)
Check your code does hasHistory is available in new version react-router.
Also you should use react-router-dom.
Hope this helps..
Use react-router-dom
Change your import in Route.js like this:
import {BrowserRouter as Router, Route} from 'react-router-dom'