时间戳

首页 > 解决方案 > React-Router DOM 不渲染其他页面的内容

reactjs - React-Router DOM 不渲染其他页面的内容

问题描述

// App.js
import React from 'react';
import Contact from './Contact';
import About from './About';
import Nav from './Nav';
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom';

function Web() {
    return (
        <Router>
            <Switch>
                <Nav />
                <Route exact path="/" Component={Home} />
                <Route exact path="/contact" Component={Contact} />
            </Switch>
        </Router>
    );
}

const Home = () => (
    <div>
        <h1>Home page</h1>
    </div>
);

export default Web;

//  Nav.js
import React from 'react';
import {Link} from 'react-router-dom';

class Nav extends React.Component {
    render() {
        return (
            <nav class="navbar navbar-light bg-light justify-content-between">
                <Link to="/contact">
                    <a class="navbar-brand">Contact</a>
                </Link>
                <Link to="/about">
                    <a class="navbar-brand">about</a>
                </Link>
            </nav>
        );
    }
}

export default Nav;

//Contact.js
import React from 'react';

class Contact extends React.Component {
    render() {
        return <h1>CONTACT PAGE</h1>;
    }
}

export default Contact;

当我不使用 react-router 时，它可以正常工作并呈现联系页面。当谈到反应路由器时，这仅呈现导航栏页面。当我单击导航栏中的联系人链接时，网址会发生变化，但它是一个空页面。我可能犯了一些错误但找不到。

标签： reactjs

解决方案

所有children的一个Switch组件都应该是一个Route或多个Redirect组件。

此外，您永远不会将component道具传递给路由组件，因为您的道具名称（如“组件”）大写。

function Web()  {

  return (
    <Router>
       <Nav /> /* Nav should be outside of the switch */
       <Switch>
           <Route exact path='/' component={Home} />  /* lowercased prop name */
           <Route exact path='/contact' component={Contact} />
      </Switch>
    </Router>
   )
}

推荐阅读