javascript - 如何在反应js中重定向新页面

Question

我遇到了一个问题。当我尝试单击登录下拉列表中的注册按钮时，它没有打开新页面，它位于页脚下方。当我点击注册按钮时，我想打开新页面。谁能告诉我我该怎么做

应用程序.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;

导航栏.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;

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

import React from 'react'

const Signup = () => {
    return (
        <div>
            <h1>Hello</h1>
        </div>
    )
}

export default Signup;

标签： javascriptreactjsbootstrap-4react-router-dom

Answer 1

You're misusing react-router-dom within App.js. Any components that you add to App.js outside of a switch will display no matter what. The switch is just used to change what component is being rendered within the tag. So in your App.js code, you are guaranteeing that your page will always have Navbar, Banner, Cards, Chat, and Footer rendered above Signup. react-router-dom is better suited for creating a general page layout in App.js, then rendering different components within it.

For this, you'll want to create two files:

• Homepage.js
• Signup.js

First, modify App.js and remove any components that will not be universal to every page on your site. Maybe you'll only want to keep the header:

App.js

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

  );
}

You'll use your Homepage.js file to add in components unique to the homepage:

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

You can implement your Signup page however you want. Then modify your new App.js to include the switches:

App.js

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>

  );
}

This design will guarantee that every page has a header and footer, as those are the two components outside of switches in App.js.