时间戳

首页 > 解决方案 > React BrowserRouter 更改 URL 但组件不呈现

reactjs - React BrowserRouter 更改 URL 但组件不呈现

问题描述

我正在尝试在我的应用程序中实现 React BrowserRouter。URL 更改但组件永远不会加载，并且控制台中没有错误。

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

应用程序.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>;
        }
    }

主页.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>
    );
        }
    
    }

用户网格.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

解决方案

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

推荐阅读