Question

我想创建一个导航栏，该导航栏具有指向不同路线的不同链接。在另一个文件中，我有react-router的东西以便更改网站。但是，当我按链接时，它才起作用，但前提是我事后重新加载。

头文件：

export default function App(){
   return(
  <div className="App">
  <Head />{/* Here are all the links in a navbar stored */}      
  <Body /> 
  <Foot />

  <Router>         
    <Switch>
      <Route path="/" exact component={Home}/>
      <Route path="/about" exact component={About}/>
      <Route path="/settings" exact component={Settings}/>
      <Route render={()=>(<h1>404</h1>)}/>
    </Switch>
  </Router>
</div>
  )
}

和应用文件：

header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");    // Date in the past
header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
                                                      // always modified
header ("Cache-Control: no-cache, must-revalidate");  // HTTP/1.1
header ("Pragma: no-cache");                          // HTTP/1.0

session_start();
$uri = $_SERVER['PHP_SELF'] . "?" . SID;
if( isset($_POST['dbuser']) ) {
  $dbuser = $_POST['dbuser'];
}
if( isset($_POST['pass']) ) {
  $pass = $_POST['pass'];
}
?>

<title>Oracle in php database user login page</title>


<?php
// have username and password been passed from a form?
if ( isset($dbuser) && isset($pass) ) {
  // try to connect to Oracle with user and password supplied
        $conn = oci_connect($dbuser, $pass, 'localhost/orcl');


  if (!$conn) {
      $e = oci_error();
      echo htmlentities($e['message'], ENT_QUOTES);
    unset($dbuser); unset($pass);
  }
}

// username and password will be unset if they weren't passed,
//  or if they were wrong


if( !isset($dbuser) || !isset($pass) ) {
    // just print form asking for account details



echo "

<body>
  <div class=login-wrap>
  <div class=login-html>
    <input id=tab-1 type=radio name=tab class=sign-in checked><label for=tab-1 class=tab>Connection</label>
    <input id=tab-2 type=radio name=tabclass=sign-up><label for=tab-2 class=tab></label>
    <div class=login-form>


";


     echo "<form action=\"$uri\"  method=post style='max-width:500px;margin:auto; background-color:#c8c8c8;'>\n";

echo "<div style='display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 100%;
  margin-bottom: 15px;'>";
echo "</div>";


    echo "</div>";



 echo "<input type=text name=dbuser class=input placeholder=Utilisateur style='width: 70%;
  padding: 10px;
  outline: none;
 border: 2px solid dodgerblue; position:absolute; top:200px; margin-left:-05px;'>\n";





echo "<div style='display: -ms-flexbox; /* IE10 */
  display: flex;
  width: 100%;
  margin-bottom: 15px;'>";


 /* style for username and pass IE10 */


  echo "<h4 style=' position:absolute; top:150px; margin-left:px;'>Utilisateur</h4>
 ";

  echo "<h4 style='position:absolute; top:250px; margin-left:px;'>Password:";



echo "</div>";



echo "<div>";


    echo " <h4 style=''><input type=password name=pass placeholder=Mot_de_Pass style='width: 70%;
  padding: 10px;
  outline: none;
 border: 2px solid dodgerblue; position:absolute; top:300px; margin-left:-05px;'>\n";
 echo "</div>";
    echo "<br><input type=submit name=login value=Login style='  background-color: dodgerblue;
  color: white;
  padding: 15px 20px;
  border: none;
  cursor: pointer;
  width: 80%;
  opacity: 0.9;  position:absolute; top:400px;'>\n";
    echo "</form>\n";
    exit;
}

Answer 1

您无需在应用程序中使用多个路由器实例。取而代之的是最顶层的父级。如果您使用多个路由，则Head内的Link组件将仅与Router内的Head组件进行通信，并且不会中继route change to Router in App

的信息

此外，如果将Head渲染为默认路线，它将从Route接收所有道具，并确保Routes的顺畅运行

export default function Head(props){
    return(
        <div className="Head">                      
            <div className="HeadItemFirst">bwftp</div>         
            <div className="HeadPaths">                    
                <Link className="HeadItem" to="/"><div>Start</div></Link>
                <Link className="HeadItem" to="/about"><div>about</div></Link>
                <Link className="HeadItem" to="/settings"><div>Settings</div></Link>                        
            </div>                                 
        </div>             
    )
}


export default function App(){
   return(
      <Router>
        <div className="App">
          <Route component={Head} />    //Render as a default route so that it gets route params
          <Body /> 
          <Foot />         
          <Switch>
            <Route path="/" exact component={Home}/>
            <Route path="/about" exact component={About}/>
            <Route path="/settings" exact component={Settings}/>
            <Route render={()=>(<h1>404</h1>)}/>
          </Switch>
        </div>
      </Router>
  )
}

网站仅在重新加载后更改-反应路由器

1 个答案: