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

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

Sara tabaghchi 2月前

120 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)
  • 我正在尝试使用 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 上运行吗?

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

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

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

    我如何得到以下结果?

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

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

    PS. 我在 bash 中。

  • 链接到所谓的“高级 Bash 脚本指南”时要非常小心;它既包含好的建议,也包含糟糕的建议。

  • $ prefix="hell"
    $ suffix="ld"
    $ string="hello-world"
    $ foo=${string#"$prefix"}
    $ foo=${foo%"$suffix"}
    $ echo "${foo}"
    o-wor
    

    本手册的 Shell 参数扩展 对此进行了记录

    ${parameter#word}
    ${parameter##word}

    单词被扩展以产生一个模式,并根据下面描述的规则进行匹配(参见 模式匹配 )。如果模式与参数的扩展值的开头匹配,则扩展的结果是在参数的扩展值中删除最短匹配模式(case # )或最长匹配模式( ## case)。[…]

    ${parameter%word}
    ${parameter%%word}

    单词被扩展以产生一个模式,并根据下面描述的规则进行匹配(参见 模式匹配 )。如果模式与参数扩展值的尾部匹配,则扩展的结果为删除最短匹配模式(case % )或最长匹配模式( %% case)的参数值。[…]

  • 否则,如果您可以通过执行 . ./my-script.sh 来避免生成子 shell,那么 .bashrc 中设置的所有别名都可以用于您的脚本,而无需任何额外设置。

  • 有没有办法将两者合并为一行?我试过 ${${string#prefix}%suffix},但是不起作用。

  • @static_rtti 不,不幸的是你不能像这样嵌套参数替换。我知道,这很遗憾。

  • GERG 2月前 0 只看Ta
    引用 10

    @static_rtti,有一个解决方法:echo basename ${string/hell} ld (其中灰色部分位于反引号之间)

  • riv 2月前 0 只看Ta
    引用 11

    @ccpizza 参数替换不知道这样的修饰符,但如果它是一个固定字符串,你总是可以这样做,例如 ${foo#[Bb][Aa][Rr]}。虽然不太好,但仍然可能比不必要的子 shell/fork 更好,具体取决于情况。

  • 使用 sed:

    $ echo "$string" | sed -e "s/^$prefix//" -e "s/$suffix$//"
    o-wor
    

    在 sed 命令中, ^ 字符 匹配以 开头的文本 $prefix ,尾随字符 $ 匹配以 结尾的文本 $suffix .

    Adrian Frühwirth 在下面的评论中提出了一些很好的观点,但 sed 对于这个目的来说非常有用。$prefix 和 $suffix 的内容由 sed 解释,这一事实可能是好事也可能是坏事 - 只要你注意,就应该没问题。美妙之处在于,你可以做这样的事情:

    $ prefix='^.*ll'
    $ suffix='ld$'
    $ echo "$string" | sed -e "s/^$prefix//" -e "s/$suffix$//"
    o-wor
    

    这可能就是你想要的,而且比 bash 变量替换更花哨、更强大。如果你记住能力越大,责任越大(正如蜘蛛侠所说),那么你应该没问题。

    找到 sed 的快速介绍 http://evc-cit.info/cit052/sed_tutorial.html

    关于 shell 及其字符串的使用的说明:

    对于给出的特定示例,以下内容也同样有效:

    $ echo $string | sed -e s/^$prefix// -e s/$suffix$//
    

    ...但仅仅是因为:

    1. echo 不关心其参数列表中有多少个字符串,并且
    2. $prefix 和 $suffix 中没有空格

    在命令行上用引号括住字符串通常是一种很好的做法,因为即使字符串中包含空格,它也会作为单个参数呈现给命令。我们用引号括住 $prefix 和 $suffix 的原因相同:每个编辑命令都会作为一个字符串传递到 sed。我们使用双引号是因为它们允许变量插入;如果我们使用单引号,sed 命令就会得到一个文字 $prefix $suffix 这肯定不是我们想要的。

    还请注意,我在设置变量 prefix suffix 。我们当然不希望字符串中的任何内容被解释,因此我们将它们用单引号引起来,这样就不会发生插值。同样,在这个例子中可能没有必要,但这是一个很好的习惯。

  • ,你还需要 shopt -s expand_aliases 在脚本中 ~/.bashrc .

  • 不幸的是,由于以下几个原因,这是个糟糕的建议:1) 不带引号的 $string 容易发生分词和通配符。2) $prefix 和 $suffix 可以包含 sed 将解释的表达式,例如正则表达式或用作分隔符的字符,这将破坏整个命令。3) 两次调用 sed 是没有必要的(您可以改为 -e 's///' -e '///'),也可以避免使用管道。例如,考虑 string='./ *' 和/或 prefix='./',并观察它由于 1) 和 2) 而严重中断的情况。

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

    有趣的是:sed 几乎可以将任何东西作为分隔符。就我而言,由于我从路径中解析前缀目录,因此无法使用 /,因此我改用 sed \'s#^$prefix##。(脆弱性:文件名不能包含 #。由于我控制文件,因此我们很安全。)

  • @iuliux:改为定义和导出函数。假设您的脚本使用不带 -i 或 -v 的 mv,并且您想要添加它们,但无法修改脚本。 function mv () { command mv -iv \'$@\'; }; export -f mv 现在您的脚本将使用这些选项。这就是为什么编写良好的脚本使用可执行文件的绝对路径(例如 /bin/mv)。它将阻止此技术发挥作用,并且是一种良好的安全做法。请将您的问题作为新问题发布,我会将其作为答案发布。

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

    @Olie:据我理解您的原始评论,您是说,您选择使用 # 作为 sed 分隔符的限制意味着您无法处理包含该字符的文件。

  • 最简单的答案就是做两件重要的事情,否则它就不会起作用。

    #!/bin/bash -i
    
    # Expand aliases defined in the shell ~/.bashrc
    shopt -s expand_aliases
    

    此后,您在 ~/.bashrc 中定义的别名将在您的 shell 脚本(giga.sh 或 any.sh)以及此类脚本中的任何函数或子 shell 中可用。

    如果不这样做,您将收到错误:

    your_cool_alias: command not found
    
  • 引用 19
    $ string="hello-world"
    $ prefix="hell"
    $ suffix="ld"
    
    $ #remove "hell" from "hello-world" if "hell" is found at the beginning.
    $ prefix_removed_string=${string/#$prefix}
    
    $ #remove "ld" from "o-world" if "ld" is found at the end.
    $ suffix_removed_String=${prefix_removed_string/%$suffix}
    $ echo $suffix_removed_String
    o-wor
    

    笔记:

    #$prefix:添加 # 可确保仅当在开头找到子字符串 \'hell\' 时才将其删除。%$suffix:添加 % 可确保仅当在结尾找到子字符串 \'ld\' 时才将其删除。

    如果没有这些,子字符串 \'hell\' 和 \'ld\' 将在任何地方被删除,即使它位于中间。

  • 嗨!shopt -s expand_aliases 行对我来说似乎不起作用。当我在图形终端 (kde Konsole) 中使用 ./script.sh 执行脚本时,实际上 #!/bin/bash -i 行就足够了,而没有 shopt -s expand_aliases 行。同样,它是使用 bash -i script.sh 运行脚本,即以交互方式 (使用 -i) 而不是 bash script.sh,这样即使没有这两行也可以工作。虽然我没有找到使用 bash script.sh 执行脚本的方法 (这两行都没有帮助)。

返回
作者最近主题: