Question

我是React的新手，正在尝试学习使用React-Router v5。由于某些原因，我的组件将无法通过路由器呈现。进入App.js文件后，我从那里手动呈现了Login.js，当我按下Login.js中的按钮时，路由器不会更改组件，但会更改url。我四处张望，似乎找不到解决方法，我觉得这很简单，我忽略了。这是我的代码。

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App.js'
import { BrowserRouter } from 'react-router-dom';

ReactDOM.render((
    <BrowserRouter>
      <App />
    </BrowserRouter>
    ),
    document.getElementById('root')
);

App.js

import React from 'react';
import ReactDOM from 'react-dom';
import '../index.css';
import routes from '../routes.js';

class App extends React.Component {

    render() {
        return (
            <div className="HomeNavBar">
                <routes />           
            </div>   
        );
    }
}

export default App

Routes.js

import React from 'react';
import { Switch, Route, Router, withRouter } from 'react-router-dom';

/**
 * Import all page components here
 */
import App from './components/App';
import Login from './components/Login.js';
import Register from './components/Register.js';

/**
 * All routes go here.
 * Don't forget to import the components above after adding new route.
 */
 export default function routes(props) {
    return (
        <Switch>
          <Route path='/Login' component={withRouter(Login)}/>
          <Route path='/Register' component={withRouter(Register)}/>
          <Route exact path='/' component={withRouter(Login)}/>
        </Switch>
    );
}

Login.js

import React from 'react';
import ReactDOM from 'react-dom';
import '../index.css';
import { Link, withRouter, Router } from 'react-router-dom'

class Login extends React.Component{

    render() {

        return (
            <div>
                <div class = "topnav">
                    <Link to="/">
                      <button class="HomeButton" id="b" href="#home">CollectR</button>
                    </Link>
                    <Link to="/Register">
                      <button id="a">SignUp</button>
                    </Link>
                    <Link to="/Login">
                      <button id="a" href="#Login">Login</button>
                    </Link>
                </div>
                <div id="logo">CollectR</div>

                <div>
                    <form id="loginform">
                        <label id="loginregistertext">Email</label>
                        <input type="text" id="logintextbox" />

                        <label id="loginregistertext">Password</label>
                        <input type="Password" id="logintextbox" />

                        <button id="button">Login </button>
                    </form>
                </div>
            </div>

        )
    }
}

export default withRouter(Login)

Answer 1

您需要这样（摘自react-router-dom文档）：

counter = 50
total = 0
for i in range(counter, 70):
    is_prime = True
    for j in range(2, i):
        remainder = i % j
        print("i is : ", i, "   - and j is : ", j, " and the remainder is : ", remainder)
        if remainder == 0:
            is_prime = False
            print("remainder = ", remainder,", so ", i, "is not a prime")
    if is_prime:
        total += i
    else:
        print(i, " is a prime")
print(total)

React-Router不会渲染组件

1 个答案: