【问题标题】:React Router URL Change but Not Component反应路由器 URL 更改但不是组件
【发布时间】:2019-03-25 14:54:03
【问题描述】:

React Router 改变了 URL 但组件没有渲染 我已经在寻找答案,但这些例子都没有奏效 当前的 React Router 和 React Router DOM 版本是 5.0.0 它仍然是简单的 create-react-app

我尝试过使用Switch标签

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

const Index = () => {
  return <h2>Home</h2>;
};

const About = () => {
  return <h2>About</h2>;
};

const Users = () => {
  return <h2>Users</h2>;
};

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <header className="App-header">
            <li>
              <Link to="/">
                <h1>Home</h1>
              </Link>
            </li>
            <li>
              <Link to="/about">
                <h1>About</h1>
              </Link>
            </li>
            <li>
              <Link to="/users">
                <h1>Users</h1>
              </Link>
            </li>
          </header>
          <hr />
          <Route exact path="/" Component={Index} />
          <Route path="/about" Component={About} />
          <Route path="/users" Component={Users} />
        </div>
      </Router>
    );
  }
}

export default App;

它不会渲染组件

【问题讨论】:

    标签: javascript reactjs react-router


    【解决方案1】:

    尝试使用小写 c 设置“组件”属性

    【讨论】:

    • 另外,如果你以后遇到这个问题,你也可以将 props 发送给组件,方法是这样:component = {() =&gt; &lt;Index user = {this.state.loggedIn}/&gt;}
    【解决方案2】:

    我认为这是一个简单的错误。您将路线中的属性词组件大写。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2022-08-24
      • 1970-01-01
      • 2023-03-31
      • 2021-01-02
      • 2019-08-27
      • 2016-10-26
      • 1970-01-01
      • 2019-09-03
      相关资源
      最近更新 更多