反应路由器页面重定向不正确? [英] React router page redirect not correctly?

问题描述

我创建了一个小项目，但我面临着一个问题，比如页面没有重定向，而且它也只在上面的内容上打印新内容.我想要做的是当用户按下链接时，它应该完全重定向到新页面，而不是旧内容.

我正在分享我的 git 存储库，请下载并帮助我解决该错误.

我的 git 仓库是:https://github.com/yashchks87/homepage.git

解决方案

我认为问题在于您希望收到的网址.

这是您的 app.js:

import React, { Component } from 'react';从react-router-dom"导入{BrowserRouter 作为路由器、链接、路由、交换机}；从'/Users/yashchoksi/Documents/homepage/src/Doctor.js'导入医生；类 App 扩展组件 {使成为() {返回 (<路由器><div><nav class="navbar navbar-dark bg-dark"><Link to="/Users/yashchoksi/Documents/homepage/src/Doctor.js">注册</Link></nav><p>您好，这是主页.</p><开关><路由精确路径="/Users/yashchoksi/Documents/homepage/src/Doctor.js" component={Doctor}/></开关>

</路由器>);}}导出默认应用程序；

您的 path 和 Link to 应该指向 url 路径而不是文件路径.

我建议把它改成这样:

render() {var homeMessage = () =>{return (<p>你好，这是主页.</p>);}返回 (<路由器><div><nav class="navbar navbar-dark bg-dark"><Link to="/app/doctor/">注册</Link></nav><开关><路由精确路径="/app/" component={homeMessage}/><路由精确路径="/app/doctor/" component={Doctor}/></开关>

</路由器>);

);

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>
   );

);

这篇关于反应路由器页面重定向不正确?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！