Javascript 如何在react js中重定向新页面

我被一个问题困住了。当我试图点击登录下拉列表中的注册按钮时，它不是打开新页面，而是在页脚下方。我想在点击注册按钮时打开新页面。 谁能告诉我怎么做

App.js文件

这是我创建路线的app.js文件

import './App.css';
import Navbar from './components/Navbar';
import Banner from './components/Banner';
import Cards from './components/Cards';
import Chat from './components/Chat';
import Footer from './components/Footer';
import Signup from './components/Signup';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

const App = () => {
  return (
    <BrowserRouter>
      <div className="App">
        <Navbar />
        <Banner />
        <Cards />
        <Chat />
        <Footer />
        <Switch>
          <Route exact path='/signup'  component={Signup} />
        </Switch>
      </div>
    </BrowserRouter>

  );
}

export default App;

import'/App.css'；
从“./components/Navbar”导入Navbar；
从“./components/Banner”导入横幅；
从“./组件/卡”导入卡；
从“./components/Chat”导入聊天；
从“./components/Footer”导入页脚；
从“./components/Signup”导入注册；
从“react router dom”导入{BrowserRouter，Route，Switch}；
常量应用=（）=>{
返回(
);
}
导出默认应用程序；

Navbar.js

这是navbar.js文件

import React from 'react';
import './Navbar.css';
import {Link} from 'react-router-dom';


const Navbar = () => {
    return (
        <div className="container">
            <nav class="navbar navbar-expand-lg navbar-light ">
                <a class="navbar-brand" href=""><img src="https://secure.skypeassets.com/content/dam/scom/images/logos/re1mu3b.png" alt="coco-cola" className="coco mr-3" /></a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>

                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li class="nav-item active">
                            <a class="navbar-brand ml-3" href=""><b>Skype</b></a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Download</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Skype to Phone</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Skype Number</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#">Features</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Products
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#">Meet Now</a>
                                <a class="dropdown-item" href="#">Skype Manager</a>
                                <a class="dropdown-item" href="#">Skype with Alexa</a>
                                <a class="dropdown-item" href="#">Skype for content Creator</a>
                                <a class="dropdown-item" href="#">Skype For Business</a>
                            </div>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Get Help
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#">Skype Support</a>
                                <a class="dropdown-item" href="#">Blog</a>
                                <a class="dropdown-item" href="#">Community</a>
                                <a class="dropdown-item" href="#">About Skype</a>

                            </div>
                        </li>
                    </ul>
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item ">
                            <a class="nav-link" href="#">Hosting a meeting</a>
                        </li>
                        <li class="nav-item dropdown">
                            <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Sign In
                            </a>
                            <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                <a class="dropdown-item" href="#"  style={{textDecoration:'none'}}><i class="fas fa-user"></i> My Account</a>
                                <Link to='/signup' class="dropdown-item" href="#" style={{textDecoration:'none'}}>Sign Up</Link>
                            </div>
                        </li>
                    </ul>
                </div>
            </nav>
        </div>
    )
}

export default Navbar;

从“React”导入React；
导入“/Navbar.css”；
从'react router dom'导入{Link}；
常量导航栏=（）=>{
返回(




















注册


)
}
导出默认导航栏；

Signup.js 这是我想重定向的页面

从“React”导入React
常量注册=（）=>{
返回(
你好
)
}
导出默认注册；

你在App.js中误用了react路由器dom。在交换机之外添加到App.js的任何组件都将显示出来，无论发生什么情况。该开关仅用于更改标记中呈现的组件。因此，在App.js代码中，您可以保证页面始终在注册上方呈现导航栏、横幅、卡片、聊天和页脚。react router dom更适合在App.js中创建通用页面布局，然后在其中呈现不同的组件

为此，您需要创建两个文件：

• 主页.js
• Signup.js

首先，修改App.js并删除对站点上的每个页面都不通用的任何组件。也许您只想保留标题：

App.js

const-App=（）=>{
返回(
);
}

您将使用Homepage.js文件添加主页特有的组件：

const Homepage = () => {
  return (
    <div className="Homepage">
      <Banner />
      <Cards />
      <Chat />
    </div>
  );
}

const主页=（）=>{
返回(
);
}

您可以根据需要实现注册页面。然后修改您的新App.js以包含以下开关：

App.js

const-App=（）=>{
返回(
);
}

---

此设计将保证每个页面都有页眉和页脚，因为它们是App.js中交换机之外的两个组件。

您在页脚下方渲染路由，并且始终渲染

，

，因此这些组件始终渲染在任何路由上方。你能澄清一下“打开新页面”是什么意思吗？

const App = () => {
  return (
    <BrowserRouter>
      <div className="App">
        <Navbar />
        <!-- You'll insert your switches here -->
        <Footer />
      </div>
    </BrowserRouter>

  );
}

const Homepage = () => {
  return (
    <div className="Homepage">
      <Banner />
      <Cards />
      <Chat />
    </div>
  );
}

const App = () => {
  return (
    <BrowserRouter>
      <div className="App">
        <Navbar />
        <Switch>
          <Route exact path='/homepage'  component={Homepage} />
          <Route exact path='/signup'  component={Signup} />
        </Switch>
        <Footer />
      </div>
    </BrowserRouter>

  );
}