I've created a mini project and I am facing a problem like page is not redirecting and it's also print new content down the above content only. What I want to do is when user press link it should redirect completely to new page not with old content.
I'm sharing my git repo, please download it and help me to solve that error.
My git repo is: https://github.com/yashchks87/homepage.git
I think the problem is with the urls that you expect to receive.
Here is your app.js:
import React, { Component } from 'react';
import {BrowserRouter as Router, Link, Route,Switch} from 'react-router-dom';
import Doctor from '/Users/yashchoksi/Documents/homepage/src/Doctor.js';
class App extends Component {
render() {
return (
<Router>
<div>
<nav class="navbar navbar-dark bg-dark">
<Link to="/Users/yashchoksi/Documents/homepage/src/Doctor.js">Sign Up</Link>
</nav>
<p>Hello this is homepage.</p>
<Switch>
<Route exact path="/Users/yashchoksi/Documents/homepage/src/Doctor.js" component={Doctor}/>
</Switch>
</div>
</Router>
);
}
}
export default App;
Your path and Link to should point to the url path and not the file path.
I would suggest changing it to something like this:
render() {
var homeMessage = () => {
return (<p>Hello this is homepage.</p>);
}
return (
<Router>
<div>
<nav class="navbar navbar-dark bg-dark">
<Link to="/app/doctor/">Sign Up</Link>
</nav>
<Switch>
<Route exact path="/app/" component={homeMessage}/>
<Route exact path="/app/doctor/" component={Doctor}/>
</Switch>
</div>
</Router>
);
);
src/Doctors as your path. THIS IS NOT THE DIRECTORY PATH. This should be the URL PATH. It should be something like /app/doctors/ or something like that.
http://localhost:3000/app/), I get an error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of 'Route'. I myself am not familiar with React Router, what is your take on this error?
'/Users/yashchoksi/Documents/homepage/src/Doctor.js'in your react project. This will break the react app for other people since we do not have such a directory on our computers. Your paths should be starting from the root directory of the react app.'homepage/src/Doctor.js'. Alternatively, you can use the.to say "start from current directory". EX:'./Doctor.js'.