Javascript React路由器不会渲染组件

我是React新手，正在尝试学习使用React路由器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')
);

从“React”导入React；
从“react dom”导入react dom；
导入“./index.css”；
从“./components/App.js”导入应用程序
从“react router dom”导入{BrowserRouter}；
ReactDOM.render((
),
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

从“React”导入React；
从“react dom”导入react dom；
导入“../index.css”；
从“../routes.js”导入路由；
类应用程序扩展了React.Component{
render（）{
返回(
);
}
}
导出默认应用程序

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>
    );
}

从“React”导入React；
从“react Router dom”导入{Switch，Route，Router，withRouter}；
/**
*在此处导入所有页面组件
*/
从“./components/App”导入应用程序；
从“./components/Login.js”导入登录名；
从“./components/Register.js”导入寄存器；
/**
*所有的路线都在这里。
*添加新路由后，不要忘记导入上面的组件。
*/
导出默认功能路由（道具）{
返回(
);
}

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)

从“React”导入React；
从“react dom”导入react dom；
导入“../index.css”；
从“react Router dom”导入{Link，withRouter，Router}
类登录扩展了React.Component{
render（）{
返回(
采集器
报名
登录
采集器
电子邮件
密码
登录
)
}
}
使用路由器导出默认值（登录）

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

导出默认函数App（）{
返回(


家


关于


使用者


{/*A查看其子对象和
呈现与当前URL匹配的第一个URL.*/}
);
}

您是否遇到任何错误？您能否将路线大写<代码>您是否尝试过使用路由器删除组件名称，并将其自身传递到路由中，即“`”？以下是withRouter的文档，可能它没有做您认为它做的事情：

export default function App() {
return (
<Router>
  <div>
    <nav>
      <ul>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <li>
          <Link to="/users">Users</Link>
        </li>
      </ul>
    </nav>

    {/* A <Switch> looks through its children <Route>s and
        renders the first one that matches the current URL. */}
    <Switch>
      <Route path="/about">
        <About />
      </Route>
      <Route path="/users">
        <Users />
      </Route>
      <Route path="/">
        <Home />
      </Route>
    </Switch>
  </div>
</Router>
);
}