8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

默认主页在页面加载时不可见

Sara tabaghchi 2月前

121 0

我正在使用 Bootstrap 在 React 中创建导航栏并添加导航链接。我正在学习使用 React Router,我的主要 App.js 文件如下所示:import './App.css';import { BrowserRouter as

我正在使用 Bootstrap 在 React 中创建导航栏并添加导航链接。我正在学习使用 React Router,我的主要 App.js 文件如下所示:

import './App.css';
import {
  BrowserRouter as Router,
  Route,
  Link,
  Routes,
  Outlet,
} from "react-router-dom";
import { Navbar, Nav } from "react-bootstrap";
import { FaHome,  FaBook,  FaBookReader } from "react-icons/fa";
import Home from './Components/Home';
import Thrillers from './Components/Thrillers';
import Classics from './Components/Classics';
import Nonfiction from './Components/Nonfiction';
import Romance from './Components/Romance';
import Sciencefiction from './Components/Sciencefiction';
function App() {
  return (
    <div className="App">
   
    <Router>
            <Navbar className="navbar-bg" expand="lg">
                <Navbar.Brand>
                    <h1 className="navbar-brand-text">
                        <Link to="/" className="brand-link">
                        <FaBookReader /> Rupesh Gupta 
                        </Link>
                    </h1>
                </Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="ml-auto">
                        <Nav.Link as={Link} to="/" className="nav-link">
                            <FaHome /> Home
                        </Nav.Link>
                        <Nav.Link as={Link} to="/thrillers" className="nav-link">
                            <FaBook /> Thrillers
                        </Nav.Link>
                        <Nav.Link as={Link} to="/classics" className="nav-link">
                            <FaBook /> Classics
                        </Nav.Link>
                        <Nav.Link as={Link} to="/nonfiction" className="nav-link">
                            <FaBook /> Non Fiction
                        </Nav.Link>
                        <Nav.Link as={Link} to="/romance" className="nav-link">
                            <FaBook /> Romance
                        </Nav.Link>
                        <Nav.Link as={Link} to="/sciencefiction" className="nav-link">
                            <FaBook /> Science Fiction
                        </Nav.Link>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
            <div className="container mt-4">
                <Routes>
                    <Route path="/" element={<Outlet />}>
                        <Route index element={<Home />} />
                        
                        <Route path="/thrillers" element={<Thrillers />} />
                        <Route path="/classics" element={<Classics />} />
                        <Route path="/nonfiction" element={<Nonfiction />} />
                        <Route path="/romance" element={<Romance />} />
                        <Route path="/sciencefiction" element={<Sciencefiction />} />
                    </Route>
                </Routes>
            </div>
        </Router>
    </div>
  );
}

export default App;

我遇到的问题是,当页面最初加载时(在 \'npm start\' 之后或访问它在 github-pages 上的部署位置时),主页组件未显示。但是,当我导航到 \'Home\' 或 \'Rupesh Gupta\'(通过 Navbar 组件中的链接)时,主页组件会显示。导航栏中的其他链接按预期工作。如果我关闭开发服务器并重新启动它,主页将不再加载。有什么建议吗?谢谢。

帖子版权声明 1、本帖标题:默认主页在页面加载时不可见
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Sara tabaghchi在本站《javascript》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 在 ~/.bashrc 中,我定义了一些别名。但是我无法在其他 shell 脚本中使用它们,在这些脚本中我只能使用在那里定义的别名。即使我 source 了 bashrc,它仍然不起作用。应该怎么做?

    在 ~/.bashrc 中,我定义了一些别名。但是我无法在其他 shell 脚本中使用它们,在这些脚本中我只能使用在那里定义的别名。即使我 source 了 bashrc,它仍然不起作用。我该怎么办?

    PS. 我在 bash 中。

  • 我想从字符串中删除前缀/后缀。例如,给定:string=\'hello-world\'prefix=\'hell\'suffix=\'ld\'如何获得以下结果?\'o-wor\'

    我想从字符串中删除前缀/后缀。例如,给定:

    string="hello-world"
    prefix="hell"
    suffix="ld"
    

    我如何得到以下结果?

    "o-wor"
    
  • 我正在尝试使用 ssh 将 bash 脚本文件发送到我的远程服务器,但首先我想使其在我自己的机器(arm64)上可执行,然后将 .exe 文件发送到远程服务器,但远程 s...

    我正在尝试使用 ssh 将 bash 脚本文件发送到我的远程服务器,但首先我想使它在我自己的机器(arm64)上可执行,然后将 .exe 文件发送到远程服务器,但远程服务器 arch 是 x86_64,如何使用“shc”命令生成与 x86_64 兼容的 .exe 文件?

    在我自己的机器上

    shc -f test.sh -o test 
    

    但是在我的 ubuntu x86_64 上无法执行它,因为它是在 arm64 机器上编译的。有什么办法可以让它在带有 shc 的 arm64 上运行吗?

  • rdk 2月前 0 只看Ta
    引用 5

    使用@Adrian Frühwirth 回答:

    function strip {
        local STRING=${1#$"$2"}
        echo ${STRING%$"$2"}
    }
    

    像这样使用

    HELLO=":hello:"
    HELLO=$(strip "$HELLO" ":")
    echo $HELLO # hello
    
  • 很棒的选择!值得一提的是:此解决方案与其他解决方案之间的一个关键区别是,如果源字符串不以前缀开头或以后缀结尾,则其他解决方案将不会剪切任何内容,而此解决方案将剪切后缀的长度。这不一定是个问题,只是需要注意的一个限制。如果您不确定字符串是否以前缀/后缀开头或结尾,只需将此语句包装在适当的 if 语句中以在修剪之前进行检查。

  • 注意: 不确定这在 2013 年是否可行,但今天(2021 年 10 月 10 日)肯定是可能的,因此增加了另一个选项……


    由于我们处理的是已知的固定长度字符串( prefix suffix ),我们可以使用 bash 子字符串通过单一操作获得所需的结果。

    输入:

    string="hello-world"
    prefix="hell"
    suffix="ld"
    

    计划:

    • bash 子字符串语法: ${string:<start>:<length>}
    • 跳过 prefix="hell" 意味着我们 <start> 4
    • <length> 将是 string ( ${#string} ) 的总长度减去固定长度字符串的长度( 4 对于 hell / 2 对于 ld )

    这给了我们:

    $ echo "${string:4:(${#string}-4-2)}"
    o-wor
    

    注意: 可以删除括号,仍可获得相同的结果


    prefix 的值 suffix 未知,或者可能变化,我们仍然可以使用相同的操作,但 4 2 替换 ${#prefix} ${#suffix}

    $ echo "${string:${#prefix}:${#string}-${#prefix}-${#suffix}}"
    o-wor
    
  • expr 非常脆弱,语法也晦涩难懂。当然,Bash 内置了这一点,因此调用外部实用程序既丑陋又昂贵。

  • 呃,为什么? expr 很旧,但从未改变,并且可能永远可用。只要您调用外部二进制文件(而不是使用 BASH 表达式),grep、sed 或 expr 几乎是等效的(perl / awk 会更昂贵)。

  • 如果您正在使用 Bash,那么您可能根本不应该使用 expr。在最初的 Bourne shell 时代,它是一种方便的厨房水槽实用程序,但现在已经过了最佳使用期限。

  • 小型且通用的解决方案:

    expr "$string" : "$prefix\(.*\)$suffix"
    
  • 有一种方法可以全局执行此操作,而无需在执行的每个脚本中添加行:通过使用变量 BASH_ENV

    以下是我针对 OS X 10.8.5 的设置:

    /etc/launchd.conf:

    setenv BASH_ENV /Users/DK/.env
    

    〜/ .bash_配置文件:

    # == Bash setup for interactive shells ==    
    # === Environment for all shells ===
    . $BASH_ENV    
    # [skipped]
    

    〜/ .env:

    # == Setup for all shells ==
    # This is executed for all interactive and for non-interactive shells (e.g. scripts)
    
    shopt -s expand_aliases extglob xpg_echo
    
    # [skipped] Misc. variables and PATH setup
    
    # === General aliases ===
    
    alias pause='echo "Press [Return] or [Enter] to continue..."; read' # read -p does not display prompt in Eclipse console
    
    # [skipped]
    
  • 使用 =~ operator :

    $ string="hello-world"
    $ prefix="hell"
    $ suffix="ld"
    $ [[ "$string" =~ ^$prefix(.*)$suffix$ ]] && echo "${BASH_REMATCH[1]}"
    o-wor
    
  • 引用 14

    我对此的解释很简单,即“不要使用别名;函数在各方面都更好(也许除了简洁性和许多初学者的不必要的偏好)”。

  • HDNW 2月前 0 只看Ta
    引用 15

    不,例如,MacOS 有现成的 Bash,但没有 GNU grep。早期版本实际上有来自 BSD grep 的 -P 选项,但他们将其删除了。

  • Debian 手册页也说了同样的事情,我不确定,但我认为这行的意思是如果别名和函数具有相同的名称,则该函数将优先,但事实并非如此(无法创建与别名同名的函数,但可以创建具有函数名称的别名,然后只有别名“运行”),所以这有点模糊。“已弃用”一词确实很突出,例如“此功能已弃用并将在以后的版本中删除”,但别名似乎并非如此

  • pyb 2月前 0 只看Ta
    引用 17

    @tripleee 确实如此。但我认为安装了 GNU Bash 的系统也有一个支持 PCRE 的 grep。

  • 上面的引文来自 OS X 的手册页。它说的是 \'supersede\' 而我说的是 \'deprecated\'。也许这是一个措辞的问题,但听起来它们不是做事的首选方式。

  • grep -P 是非标准扩展。如果您的平台支持它,那么您将获得更多功能,但如果您的代码需要合理的可移植性,那么这是值得怀疑的建议。

  • 我使用 grep 从路径中删除前缀(不能很好地处理 sed ):

    echo "$input" | grep -oP "^$prefix\K.*"
    

    \K 从匹配中删除它之前的所有字符。

返回
作者最近主题: