React router page redirect not correctly?

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 (
        <nav class="navbar navbar-dark bg-dark">
          <Link to="/Users/yashchoksi/Documents/homepage/src/Doctor.js">Sign Up</Link>
        <p>Hello this is homepage.</p>
            <Route exact path="/Users/yashchoksi/Documents/homepage/src/Doctor.js" component={Doctor}/>
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 (
            <nav class="navbar navbar-dark bg-dark">
                <Link to="/app/doctor/">Sign Up</Link>
                <Route exact path="/app/" component={homeMessage}/>
                <Route exact path="/app/doctor/" component={Doctor}/>


受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

  • How to Deploy CRA to GitHub Pages Using React Router
    I have been majorly trapped by this curve ball. I have a site built w/ create react app which I'd like to deploy to GitHub Pages, however, I've hit a blocker with React Router. I understand GitHub pages work flawlessly w/ static content, but: 1- what is the correct solution to deploy to GitHub pages with SPA using react router ? I tried all sort of configuration and none worked. my routes are configured as: Index.js import React from 'react'; import { render } from 'react-dom'; import { BrowserRouter as Router } from "react-router-dom"; import App from './App'; render(<Router basename={process
  • Redirect to previous path on login - React Router v4
    I am using react router v4 and trying to implement a functionality where no matter what route the user clicks on, he gets taken to the login page i.e. if he is not logged in already. but after login he is redirected to the same page he was trying to access before login I have managed to do that for 2 of the routes using the below code, but not sure if this is the best way to do this <Route path="/dashboard" render={(props) => ( auth ? (<MainDash props={this.props} />) : (<Redirect to="/login"/>) )} /> <Route exact path="/customers" render={(props) => ( auth ? (<MainApp />) : (<Redirect to="
  • 反应路由器 - 登录后重定向(react router - Redirection after login)
    问题 你能否帮助我理解我可以在最新版本的react router (v1.1.0) 中使用的重定向机制。 我想根据用户登录的成功或失败重定向到一个url 。 我尝试执行以下操作首先使用创建历史记录。 let history = createBrowserHistory(); 然后尝试使用推送状态 history.pushState(null, 'abc') 什么都没有发生。 您能否让我知道进行转换的正确方法。从文档中我了解到最新版本中不存在transitionTo() API。 如果您能指出一个简单的工作示例,那就太好了。 提前致谢。 回答1 想更新这个线程,因为我花了很多时间来研究这个问题。 在 React Router 2.0.x 中, replaceState已被弃用,以支持替换。 有关详细信息,请参见此处:https://github.com/ReactTraining/react-router/blob/v2.0.0/upgrade-guides/v2.0.0.md#link-to-onenter-and-isactive-use-location-descriptors 正确的方法是这样的: function requireAuth(nextState, replace) { if (!userExists()) { replace({ pathname: '
  • 如何在react-router中限制对路由的访问?(How to restrict access to routes in react-router?)
    问题 有谁知道如何在react-router中限制对特定路由的访问? 我想在允许访问特定路由之前检查用户是否已登录。 我以为这很简单,但是文档尚不清楚该怎么做。 我应该在定义<Route>组件的地方进行设置吗,还是应该在组件处理程序中对其进行处理? <Route handler={App} path="/"> <NotFoundRoute handler={NotFound} name="not-found"/> <DefaultRoute handler={Login} name="login"/> <Route handler={Todos} name="todos"/> {/* I want this to be restricted */} </Route> 回答1 更新(2019年8月16日) 在react-router v4和使用React Hooks中,这看起来有些不同。 让我们从您的App.js开始。 export default function App() { const [isAuthenticated, userHasAuthenticated] = useState(false); useEffect(() => { onLoad(); }, []); async function onLoad() { try { await Auth
  • 在不使用重定向或链接的情况下更改 react-router v4 中的 URL [重复](Changing the URL in react-router v4 without using Redirect or Link [duplicate])
    问题 这个问题在这里已经有了答案: 使用 react-router 以编程方式导航(8 个回答) 3年前关闭。 我在我的 React 应用程序中使用 react-router v4 和 material-ui。 我想知道一旦单击GridTile中的 GridTile,如何更改 URL。 我最初的想法是为onTouchTap使用一个处理程序。 但是,我可以看到重定向的唯一方法是使用组件Redirect或Link 。 如何在不呈现这两个组件的情况下更改 URL? 我试过this.context.router.push('/foo')但它似乎不起作用。 回答1 试试这个, this.props.router.push('/foo') 警告适用于 v4 之前的版本 和 this.props.history.push('/foo') v4 及以上版本 回答2 我正在使用它来重定向React Router v4 : this.props.history.push('/foo'); 希望它对你有用;) 回答3 反应路由器 v4 我需要做几件事情才能顺利完成这项工作。 auth 工作流程的文档页面有很多需要的东西。 但是我有三个问题 props.history从哪里来? 我如何将它传递给不直接位于Route组件内部的组件如果我想要其他props怎么办? 我最终使用了: 来自
  • How to redirect to correct client route after social auth with Passport (react, react-router, express, passport)
    I have a React/Redux/React Router front end, Node/Express back end. I’m using Passport (various strategies including Facebook, Google and Github) for authentication. What I want to happen: Unauthenticated user attempts to access protected client route (something like /posts/:postid, and is redirected to /login. (React Router is handling this part) User clicks the ‘Log in with Facebook’ button (or other Social auth service) After authentication, user is automatically redirected back to the route they were attempting to access in step 1. What is happening instead: The only way I’ve found to
  • React.js中的简单条件路由(Simple Conditional Routing in Reactjs)
    问题 当且仅当某些条件满足时,如何进行条件路由,才应进行路由。 例如,仅当用户输入正确的凭据时,登录才应该成功,并且用户应该能够看到欢迎页面。 如果我们直接点击某些URL(例如“ localhost:8080 / welcome”),不应将其导航至欢迎页面,则仅在登录欢迎页面后才能看到。 我怎么能做到这一点,任何人都可以帮我..谢谢你。 App.js import React, { Component } from 'react'; import Header from './Header'; class App extends Component{ render(){ return( <div> <Header /> </div> ); } } export default App; Header.js import React, { Component } from 'react'; import {Link} from 'react-router-dom'; import Login from './Login'; import SignUp from './SignUp'; class Header extends Component{ render(){ return( <div> <nav class="navbar navbar-default"> <div
  • React router private routes / redirect not working
    I have slightly adjusted the React Router example for the private routes to play nice with Redux, but no components are rendered when Linking or Redirecting to other 'pages'. The example can be found here: https://reacttraining.com/react-router/web/example/auth-workflow Their PrivateRoute component looks like this: const PrivateRoute = ({ component: Component, ...rest }) => ( <Route {...rest} render={props => ( fakeAuth.isAuthenticated ? ( <Component {...props}/> ) : ( <Redirect to={{ pathname: '/login', state: { from: props.location } }}/> ) )}/> ) But, because I have incorporated it in a
  • React Router DOM not working correctly on Amplify Console AWS
    I have deployed react app on Amplify Console following their documentation. The site is deployed and running fine, I am able to navigate using links but when I try to land to any url directly I get redirected to my configured 404 page. Below is the code I am using ReactDOM.render( <Router> <Route path="/" component={App} /> </Router>, document.getElementById("root"), ); And here is how my route looks like - <Switch> <Route exact path="/" render={(): JSX.Element => <Home auth={this.auth} />} /> <Route path="/features" render={(): JSX.Element => <Features />} /> <Route path="/pagenotfound"
  • React-router v4 - cannot GET *url*
    I started to use react-router v4. I have a simple <Router> in my app.js with some navigation links (see code below). If I navigate to localhost/vocabulary, router redirects me to the right page. However, when I press reload (F5) afterwards (localhost/vocabulary), all content disappear and browser report Cannot GET /vocabulary. How is that possible? Can somebody gives me any clue how to solve that (reload the page correctly)? App.js: import React from 'react' import ReactDOM from 'react-dom' import { BrowserRouter as Router, Route, Link } from 'react-router-dom' import { Switch, Redirect } from
  • 将React-Router用于布局页面或每页面多个组件(Using React-Router with a layout page or multiple components per page)
    问题 我正在将React Router添加到现有项目中。 目前,模型被传递到一个根组件中,该根组件包含用于子导航的导航组件和一个主组件。 我发现的React Router的示例只有一个子组件,在不重复两个子组件的情况下改变两个子组件的最佳方法是什么? 回答1 如果我正确理解您的要求,则可以在Route定义多个组件。 您可以像这样使用它: // think of it outside the context of the router, if you had pluggable // portions of your `render`, you might do it like this <App children={{main: <Users/>, sidebar: <UsersSidebar/>}}/> // So with the router it looks like this: const routes = ( <Route component={App}> <Route path="groups" components={{main: Groups, sidebar: GroupsSidebar}}/> <Route path="users" components={{main: Users, sidebar: UsersSidebar}}> <Route path=
  • React redux how to redirect to specific page using react-router
    I have made some state in reducers which return a value of logged_in which has a boolean value. Here is my code: import React from 'react' import { render } from 'react-dom' import { Router, Route, Link } from 'react-router' import { connect } from 'react-redux' export class NewStock extends React.Component { componentWillMount() { const { router, session } = this.props; if (session.userSessionData.get('logged_in') == false) { router.transitionTo('/login'); } }; render() { const { router, session } = this.props const currentRoute = router.location.pathname return ( <div className="row"> <h1
  • React Router V4 - Page does not rerender on changed Route
    I am building a small App to learn React with Meteor. The user is asked to input a location, based on this location the user gets routed to a new page, where the location is displayed on the top of the page and some data from the database based on that location (not yet, this is my next step). I store the location in state on the component. Now it would be nice if the user could change the location. This is easy: just update state, e voilá. Or so I thought. The problem now is that the URL doesn't update, which looks dumb. I then thought: "Okay, lets check on click if old location (in state)
  • Redirect in react-router-dom?
    I'm working on react-router-dom app for the first time since I started using react/redux and I'm having a trouble with using Redirect component. I want to fire Redirect when authentication is successful but it does not redirect to the page that I want after authentication. index.js import { BrowserRouter as Router, Route } from 'react-router-dom'; import { createStore, applyMiddleware } from 'redux'; import ReduxThunk from 'redux-thunk'; import App from './components/app'; import Page1 from './containers/page1'; import Signin from './containers/auth/signin'; import Reducers from './reducers'
  • 使用React Router重定向页面的最佳方法是什么?(What is the best way to redirect a page using React Router?)
    问题 我是React Router的新手,并了解到重定向页面的方法有很多: 使用browserHistory.push("/path") import { browserHistory } from 'react-router'; //do something... browserHistory.push("/path"); 使用this.context.router.push("/path") class Foo extends React.Component { constructor(props, context) { super(props, context); //do something... } redirect() { this.context.router.push("/path") } } Foo.contextTypes = { router: React.PropTypes.object } 在React Router v4中,有this.context.history.push("/path")和this.props.history.push("/path") 。 详细信息:如何在React Router v4中推送到历史记录? 我对所有这些选项感到困惑,是否有最佳的方法来重定向页面? 回答1 实际上,这取决于您的用例。 1
  • react router 路由守卫_react-router路由守卫
    安装redux和react redux index.js 用react-redux的Provider复合组件实现逐层传参,导入store作为要传的参数 import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; import { Provider } from "react-redux"; import store from "./store"; ReactDOM.render( , document.getElementById("root"), ); src/store/index.js 使用redux的createStore和combineReducers,定义了reducer,传给store import { createStore, combineReducers } from "redux"; const initialUser = { isLogin: false, user: { name: null }, }; function loginReducer(state = { ...initialUser }, action) { switch (action.type) { case "getUserInfo"
  • 使用react-router登录后自动重定向(Automatic redirect after login with react-router)
    问题 我想在我的react / react-router / flux应用程序中建立一个Facebook登录名。 我在登录事件上注册了一个侦听器,如果用户已登录,希望将其重定向到'/dashboard' 。我该怎么做? location.push效果不佳,除非完全重新加载了页面。 回答1 React Router v0.13 从Router.create返回的Router实例可以传递(或者,如果在React组件内部,则可以从上下文对象获取它),并且包含诸如transitionTo之类的方法,可以用来过渡到新路由。 回答2 反应路由器v3 这就是我所做的 var Router = require('react-router'); Router.browserHistory.push('/somepath'); 反应路由器v4 现在我们可以在React Router v4中使用<Redirect>组件。 渲染<Redirect>将导航到新位置。 新位置将覆盖历史记录堆栈中的当前位置,例如服务器端重定向。 import React, { Component } from 'react'; import { Redirect } from 'react-router'; export default class LoginComponent extends Component {
  • 反应路由器在aws s3存储桶中不起作用(react router doesn't work in aws s3 bucket)
    问题 我将React网站的build/文件夹部署到了一个AWS S3存储桶中。 如果我去www.mywebsite.com ,它的工作原理,如果我点击a标签去项目和关于页面,它使我的右页。 但是,如果我复制并发送页面URL或直接转到以下链接: www.mywebsite.com/projects ,它将返回404。 这是我的App.js代码: const App = () => ( <Router> <div> <NavBar/> <Switch> <Route exact path="/" component={Home}/> <Route exact path="/projects" component={Projects}/> <Route exact path="/about" component={About}/> <Route component={NoMatch}/> </Switch> </div> </Router> ); 回答1 我不确定你是否已经解决了。 我遇到过同样的问题。 这是因为AWS S3正在寻找要提供的文件夹(项目),而您没有该文件夹。 只需将Error文档指向index.html 。 这对我有用。 您可以在react-router中处理错误页面。 回答2 2020年5月1日更新: 由于这篇文章非常活跃,因此我需要更新答案: 因此
  • How to update the router state on history.replace in react router?
    My react router has state isActive(boolean) value. When I use the Link component to redirect to different route I can update the state as follows and its working fine:- <Link to={{ pathname: "my-home-page", search: '?query=abc', state: { isActive: true } }}>Go to Home</Link> Also when I use history.push state is updating correctly bu using below code:- history.push({ pathname: '/template', search: '?query=abc', state: { isActive: true } }); However when I am using history.replace in javascript I am not able to update the state. I am trying the below code however its not working. history
  • What is the best way to redirect a page using React Router?
    I am new to React Router and learn that there are so many ways to redirect a page: Using browserHistory.push("/path") import { browserHistory } from 'react-router'; //do something... browserHistory.push("/path"); Using this.context.router.push("/path") class Foo extends React.Component { constructor(props, context) { super(props, context); //do something... } redirect() { this.context.router.push("/path") } } Foo.contextTypes = { router: React.PropTypes.object } In React Router v4, there's this.context.history.push("/path") and this.props.history.push("/path"). Details: How to push to History