React BrowserRouter 更改 URL 但组件不呈现答案

【问题标题】：React BrowserRouter Changes URL but Component doesn't RenderReact BrowserRouter 更改 URL 但组件不呈现
【发布时间】：2020-11-28 05:30:13
【问题描述】：

我正在尝试在我的应用中实现 React BrowserRouter。 URL 发生了变化，但组件永远不会加载，控制台中也没有错误。

这是一个使用 React 的 VS Web 应用程序。

App.js


    import React, { Component, Fragment } from 'react';
    import MainApp from './components/MainApp';
    import { BrowserRouter, Route, Switch } from "react-router-dom";
    import Home from './components/Home/Home';
    import UserGrid from './components/UserGrid/UserGrid';
    
    export default class App extends Component {
        render() {
            return <BrowserRouter>
                <MainApp>
                    <route exact path="/" Component={{Home}}/>
                    <route path="/usergrid" Component={{UserGrid}}/>
                </MainApp>
                </BrowserRouter>;
        }
    }

Home.js


    import React from 'react';
    const Link = require('react-router-dom').Link
    
    export default class Home extends React.Component {
        render() {
            return (
                <div>
    
                    <h1>Hello World!</h1>
                    <div>
                            <div><Link to='/usergrid'>Go to Users</Link> </div>
                    </div>
                </div>
    );
        }
    
    }

UserGrid.js


    import React from 'react';
    import { Col, Container, Row } from 'reactstrap';
    import DataTable from '../UserForm/DataTable';
    import RegistrationModal from '../UserForm/RegistrationModal';
    import { USERS_API_URL } from '../../constants';
    
    ....
    export default class UserGrid extends React.Component {
    render() {
            return <Container style={{ paddingTop: "100px" }}>
                <Row>
                    <Col>
                        <h3>Users</h3>
                    </Col>
                </Row>
    ...
    }
    }
    
    }

最初，当我创建项目时，BrowserRouter 位于 index.js 中，请告诉我是否应该将其移回。最终我想要一个登录页面，当然还有应用程序路由。

【问题讨论】：

标签： reactjs

【解决方案1】：

导入Route并使用小写route是否正常？
在下面的{{Home}} 和{{UserGrid}} 中放入{{ }} 而不是{ } 是否正常？
我不知道这是否也是一个区分大小写的问题，但是您可以尝试将component 小写为Component={Home} Component={UserGrid}

那么，这个：

import { BrowserRouter, Route, Switch } from "react-router-dom";
    
<route exact path="/" Component={{Home}}/>
<route path="/usergrid" Component={{UserGrid}}/>

会变成：

import { BrowserRouter, Route, Switch } from "react-router-dom";
    
<Route exact path="/" component={Home}/>
<Route path="/usergrid" component={UserGrid}/>

【讨论】：

【解决方案2】：

Component 期望组件直接传递，而不是作为对象传递。 Route 必须大写，只有原生 react 组件可以小写声明。

在您的代码中修复以下内容并尝试它是否有效，

 import React, { Component, Fragment } from 'react';
 import MainApp from './components/MainApp';
 import { BrowserRouter, Route, Switch } from "react-router-dom";
 import Home from './components/Home/Home';
 import UserGrid from './components/UserGrid/UserGrid';
    
    /* App.js */ 
    export default class App extends Component {
         render() {
             return <BrowserRouter>
                 <MainApp>
                     <Route exact path="/" Component={Home}/> /* <== */
                     <Route path="/usergrid" Component={UserGrid}/> /* <== */
                 </MainApp>
               </BrowserRouter>;
            }
        }
    
    /* Home.js */
    import React from 'react';
    import {Link} from 'react-router-dom
        //const Link = require('react-router-dom').Link  /* Delete */
        
        export default class Home extends React.Component {
            render() {
                return (
                    <div>
        
                        <h1>Hello World!</h1>
                        <div>
                                <div><Link to='/usergrid'>Go to Users</Link> </div>
                        </div>
                    </div>
        );
            }
        
        }

【讨论】：