如何在 React 中链接两个单独的页面？答案

【问题标题】：How to link two separate pages in React?如何在 React 中链接两个单独的页面？
【发布时间】：2020-11-09 05:44:05
【问题描述】：

我在名为 components 的文件夹中有两个页面注册和登录，我正在尝试使用 <Link> 将注册页面与登录页面链接。但它给出了一些错误。

components/SignUp.js

<div className = 'spacing'>Already have an account?&nbsp;<span className = 'highlight'><Link to = {'/SignIn'}>Sign In</Link></span></div>

components/SignIn.js

import React, { Component } from 'react'
import './SignInStyleSheet.css'

class SignIn extends Component {
       render() {
       return (
            <React.Fragment>
            {/* for pop-up  success */}
            <div class = "pop-up-success">
                <h3> Login Successful.</h3>
            </div>
            {/* for pop-up  error */}
            <div class = "pop-up-error">
                <h3> Incorrect Username/ Password.</h3>
            </div>
            <div class = 'container'>
                {/* for form box */}
                <div class =' window'>
                    <div class = 'bold-line'></div>
                    <div class = 'overlay'></div>
                    <div class = 'content'>
                        <div class = 'welcome'>Welcome Again!</div>
                        <div class = 'subtitle'>Thank you to step forwaerd to save water.</div>
                        <form class = "input-fields">
                            <input type = 'email' placeholder = 'Email' class = 'input-line full-width' value = "" name = "useremail" id = "email" required></input>
                            <input type = 'text' placeholder = 'Street' class = 'input-line full-width' required></input>
                            <input type = 'text' placeholder = 'City' class = 'input-line full-width' required></input>
                            <select id = "select_opt" class = 'input-line full-width' required></select>
                            <input type = 'password' placeholder = 'Password' class = 'input-line full-width' value = "" name = "userpasswd" id = "password" required></input>
                        </form>
                        <div class = 'spacing'>Forgot Password?&nbsp;<span class = 'highlight'><a href = "#">Click Here</a></span></div>
                        <div><button id = 'loginBtn' class = 'ghost-round full-width' type = "button">Log In</button></div>
                        <div class = 'spacing'>New User?&nbsp;<span class = 'highlight'><a href = "sign-up.html">Sign Up</a></span></div>
                    </div>
                </div>
            </div>   
        </React.Fragment>
    )
}
}
export default SignIn

错误：

Error: Invariant failed: You should not use <Link> outside a <Router>

【问题讨论】：

标签： reactjs react-web react-link

【解决方案1】：

使用以下命令安装 react-router-dom

npm install --save react-router-dom

在您的项目目录中创建一个新文件（MainRouter）

import { BrowserRouter, Route, Link } from "react-router-dom"; //import the package
import SignIn from "../SignIn" //import your signIn page
import SignUp from "../SignUp" //import your signUp page

function MainRouter(){
    return(
        <BrowserRouter>
            <div className="container">
                <Switch>
                    <Route path="/signIn" component={SignIn} />
                    <Route path="/signUp" component={SignUP} />
                </Switch>
            </div>
       </BrowserRouter>

    )
}
export default MainRouter

为什么需要这个

react-router-dom 包允许您在浏览器（客户端）中动态导航页面而无需刷新页面，这是在单页应用程序中处理导航的好方法

【讨论】：

我要求多页申请。
react system pages 是指组件，react 是单页应用框架，所以你可以毫不犹豫的使用上面的代码

【解决方案2】：

管理 react 应用页面之间导航的最佳方式是使用 react 路由器 - 路由器管理应用中可用的路由（即链接到应用中页面的 URL）。

看看这个关于 React Router 的介绍： https://www.freecodecamp.org/news/react-router-in-5-minutes/

或者另一个很好的介绍： https://www.newline.co/@andreeamaco/how-to-handle-navigation-in-your-app-with-react-router-link--088f82d3

【讨论】：

但这是针对单页应用的。如果我想要多页应用程序怎么办？
@UtsavAkashNaskar - 是的，这也适用于多页 React.js 应用程序。