React Router DOM 不渲染页面答案

【问题标题】：React Router DOM not rendering the pageReact Router DOM 不渲染页面
【发布时间】：2022-07-28 19:21:49
【问题描述】：

我是 react js 新手，我正在尝试使用 react-router-dom 进行页面导航，即使尝试了很多次也无法加载页面。

index.js

import React from "react";
import ReactDOM from 'react-dom';
 
import 'bootstrap/dist/css/bootstrap.css';
import { App } from './App' 
const element=  <App />;
ReactDOM.render(element, document.getElementById('root'));

App.js

import React from 'react' 
import {Route, BrowserRouter as Router, Link} from 'react-router-dom';
import Home from './components/Home';
import Hello from './components/Hello';
export function App()
{
    return(
        <div>
        <Router> 
             <div className='container'>
                <div className='navbar-header'>
                    <ul className='nav navbar-nav'>
                        <li> <Link to={'./components/Home'}>Home</Link> </li>
                        <li><Link to={'./components/Hello'}>Hello</Link></li>
                    </ul>
                </div>
            </div>                           
        </ Router>
        </div>

    );
}

src/components/Home.jsx

在 Home.jsx 中，我正在尝试从 API 获取数据并且该页面工作正常。

谢谢。

【问题讨论】：

标签： reactjs

【解决方案1】：

您以错误的方式使用反应路由器。 Link 只是路由器对<a> 标签的实现...它只是更改您的网址并重定向您的您..您需要指定应显示的Route：



export function App()
{
    return(
        <div>
        <Router> 
             <div className='container'>
                <div className='navbar-header'>
                    <ul className='nav navbar-nav'>
                        <li> <Link to={'/'}>Home</Link> </li>
                        <li><Link to={'/hello'}>Hello</Link></li>
                    </ul>
                </div>
            </div> 
<Switch>
<Route exact path="/" component={Home} />
<Route exact path="/hello" component={Hello} />
</Switch>                          
        </ Router>
        </div>

    );
}

【讨论】：

感谢您的回复，现在这表明在“react-router-dom”中找不到导出“Switch”（导入为“Switch”）
开关是 npm i react-router-dom@5 的问题，我使用的是当前包。

【解决方案2】：

您必须先为每个页面设置路线，然后才能导航到页面。

请浏览此资源resource。

这是一个非常好的资源。我希望这能解决你的问题:)

【讨论】：