0
votes

[

import React, { Component } from "react";
import { BrowserRouter as Router , Route } from "react-router-dom";

const NewRout = () => {
  return(
    <p> MY ROUTE </p>
  );
}
class App extends Component {
  render() {
    return (
        <Router>
          <Route path="/signin" Component={NewRout} />
        </Router>
    );
  }
}

export default App;

]1I'm using router in my react page. But I can't see output. I import BrowserRouter and Route from react-route-dom and try to show mt component inside the route.but this is not working for me.Please help me how to solve this issue. Thanks

<BrowserRouter><Route path="signin" Component={Signin} /></BrowserRouter>
1
Does the URL changes? - Harish Soni
no the URL is same - Sadegh SN
Please include more code. - Harikrishnan
what do you mean by not working - Shubham Khatri
i have not any output - Sadegh SN

1 Answers

0
votes

You have a mistake in your path:

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter, Route, Link } from "react-router-dom";
import "./styles.css";

const Home = () => (
  <h1>
    Home <Link to="/signin">SING</Link>
  </h1>
);

const SingIn = () => (
  <h1>
    <Link to="/">Home</Link>
    This is singin page
  </h1>
);

ReactDOM.render(
  <div>
    <BrowserRouter>
      <div>
        <Route exact path="/" component={Home} />
        <Route path="/signin" component={SingIn} />
      </div>
    </BrowserRouter>
  </div>,
  document.getElementById("root")
);

Now locate to http://localhost:port/singin you will see your component.

Note: I added a / before your path. This denotes that you are going to signin from your root that is /.

You need to use a prop called exact which matches for exact Route.

Try this SandBox

https://codesandbox.io/s/moj8kxp0nx