why react Router is not working . when i change the path?

0
votes

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;
1
reactjsrouterreact-router-domreact-dom
What do you mean "it's not working" ?You have a few things to change here: first, your components should not be rendered using <MyComponent></MyComponent> if they do not have any children. You can replace them with <MyComponent />. – Pierre Olivier Tran
You should use path property of Route, not the to. – Ajeet Shah

1 Answers

1
votes

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