Question

我无法解决React Router的一些问题。我有两个组件：Login和ChoiceScreen。在Login组件中，我具有指向ChoiceScreen组件的链接，但是当我单击该链接时，它将在我的Login组件内容中呈现ChoiceScreen组件的内容（在该部分中，我呈现了两个组件的内容）。当我转到/ choices时，它呈现得很好（仅ChoiceScreen组件内容）。单击链接到ChoiceScreen后，我只想加载该组件。我将当前代码留在下面。有什么建议吗？

App.js

class App extends Component {
  render() {
    return (
      <Router>
          <div>       
              <Route exact path="/" component={Login} />
              <Route path="/choice" component={ChoiceScreen} />
          </div>
      </Router>
    );
  }
}

Login.js

render() {
  return (
    <div className="login-container">
      <div className="login-form">
        <form onSubmit={this.handleSubmit}>
          <div className="top">
            <img src={logo} id="logo-login" />
          </div>

          <div className="form-area">
            <div className="group">
              <input
                type="text"
                className="form-control"
                id="username"
                name="username"
                value={this.state.value}
                onChange={this.handleChange}
                placeholder="Username"
              />
              <FontAwesomeIcon className="login-icon" icon="user" />
            </div>

            <div className="group">
              <input
                type="text"
                className="form-control"
                id="password"
                name="password"
                value={this.state.value}
                onChange={this.handleChange}
                placeholder="Password"
              />
              <FontAwesomeIcon className="login-icon" icon="key" />
            </div>

            <div className="checkbox-login-container">
              <label className="container-label">
                Remember Me
                <input type="checkbox" />
                <span className="checkmark" />
              </label>
            </div>

            <input
              type="submit"
              className="btn btn-default btn-block"
              id="login-btn"
              value="LOGIN"
            />
          </div>
        </form>
      </div>

      <Router>
        <div>
          <Link to="/choice">Choices</Link>
          <Route path="/choice" component={ChoiceScreen} />
        </div>
      </Router>
    </div>
  );
}

Answer 1

从登录组件中删除<Route path="/choice" component={ChoiceScreen} />。

Answer 2

尝试 import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

内部渲染

render() {
    return (
      <Router>
          <div>
             <Switch>     
              <Route exact path="/" component={Login} exact />
              <Route path="/choice" component={ChoiceScreen} />
             </Switch>
          </div>
      </Router>
    );
  }
}

Answer 3

您需要一些修复程序才能使此工作

如果不在React Router 4中传递浏览器历史记录，则不能直接使用“ Router”

React Router向组件添加内容

3 个答案: