React-routing -> routing即使在"exact“字段之后也会呈现在同一页面上

Question

我想要呈现的注册页面时，它在登录页面上点击。我在路由方面遇到了一些问题。注册页面呈现在同一页面上。我只在登录页面上创建了一条路由("/signup")。我的目标是只渲染一个新页面的注册细节。我想通过添加exact就能解决这个问题。

​

import React from 'react';
import './Login.css';
import {Route, Link, BrowserRouter as Router} from 'react-router-dom'
import Signup from "./Signup";
import Home from "./Home";


function Login() {
  return (
<div class="login-page">
  <h2 id="projectName" class="text-center"> login. </h2>
  <div class="form">
    <form class="login-form">
      <input type="text" placeholder="Username"/>
      <input type="password" placeholder="Password"/>
      <button>login</button>
        <Router>
            <p class="message">New user ->
            <Link to="/signup">Sign up</Link>
            </p>
            <Route path="/signup" exact={true} component={Signup} />
        </Router>
      <p class = "message"> <a href="#">Forgot Password</a> or <a href="#">Forgot Username</a> </p>
    </form>
  </div>
  <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <h1 class="tagline text-center"></h1>
        </div>
      </div>
    </div>
</div>

  );
}

export default Login;

​

​

import React from 'react';
import './Login.css';

function Signup() {
  return (
<div class="login-page">
  <h2 id="projectName" class="text-center"> signup.</h2>
  <div class="form">
    <form class="login-form">
      <input type="text" placeholder="First name"/>
      <input type="text" placeholder="Last name"/>
      <input type="email" placeholder="Email"/>
      <input type="text" placeholder="Username"/>
      <input type="password" placeholder="Password"/>
      <button>Sign up</button>
      <p class="message">Already have an account -> <a href="">Login</a></p>
    </form>
  </div>
  <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <h1 class="tagline text-center"></h1>
        </div>
      </div>
    </div>
</div>


  );
}

export default Signup;

image of how the page looks with the login, and signup -> I have only set one route

​

Answer 1

通过以下方式呈现登录组件

<Route path="/" exact component={login} />

在app.js文件中

希望这能解决你的问题

Answer 2

在login.js组件中尝试此操作

import React from 'react';
import {Link} from 'react-router-dom'

function Login() {
  return (
<div class="login-page">
  <h2 id="projectName" class="text-center"> login. </h2>
  <div class="form">
    <form class="login-form">
      <input type="text" placeholder="Username"/>
      <input type="password" placeholder="Password"/>
      <button>login</button>
            <p class="message">New user ->
            <Link to="/signup">Sign up</Link>
            </p>

      <p class = "message"> <a href="#">Forgot Password</a> or <a href="#">Forgot Username</a> </p>
    </form>
  </div>
  <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <h1 class="tagline text-center"></h1>
        </div>
      </div>
    </div>
</div>

  );
}

export default Login;

signup.js中的

import React from 'react';

function Signup() {
  return (
<div class="login-page">
  <h2 id="projectName" class="text-center"> signup.</h2>
  <div class="form">
    <form class="login-form">
      <input type="text" placeholder="First name"/>
      <input type="text" placeholder="Last name"/>
      <input type="email" placeholder="Email"/>
      <input type="text" placeholder="Username"/>
      <input type="password" placeholder="Password"/>
      <button>Sign up</button>
      <p class="message">Already have an account -> <a href="">Login</a></p>
    </form>
  </div>
  <div class="container">
      <div class="row">
        <div class="col-lg-12">
          <h1 class="tagline text-center"></h1>
        </div>
      </div>
    </div>
</div>


  );
}

export default Signup;

创建路由组件以重定向到其他组件

import React from 'react';
import {Route, Switch} from 'react-router-dom';
import Signup from './Signup'

const Routes = () => {
    return(
      <Switch>
        <Route path="/signup" exact={true} component={Signup} />
      </Switch>
    )
}

export default Routes;