Javascript 在react中将react路由添加到路由器会生成空白页

每当向我的react组件添加路由时，页面将变为空白，没有错误消息。唯一发生这种情况的时候是我将路由添加到交换机内的Nav.js文件中。以下是我的代码：

Nav.js：

import React from "react";
import './Nav.css';
import { BrowserRouter as Router } from 'react-router-dom'
import { NavLink, Switch } from 'react-router-dom';
// import { Routes } from '../routes';
import BrowserRouter
import { Route} from 'react-router-dom';
import Design from "../Design";
import Main from '../Main';


// import Navbar from 'react-bootstrap/Navbar';
// import NavDropdown from 'react-bootstrap/NavDropdown';


const Nav = () => {
    return (
      <Router>
      
      <div className="Nav">
      <div className="head">
       <div id="title">
        WKO
        <div id="bar"></div>
       </div>
       <div className="headlist">
        
         <ul >
         <li><NavLink to="/" style={{color: 'aliceblue', textDecoration: 'none' }} activestyle={{color: 'red'}}>Home</NavLink></li>
         <li><NavLink to="/" style={{color: 'aliceblue', textDecoration: 'none'}} activestyle={{color: 'red'}}>Foundation</NavLink></li>
         <li><NavLink to="/design" style={{color: 'aliceblue', textDecoration: 'none'}} activestyle={{color: 'red'}}>Design</NavLink></li>
         <li><NavLink to="/" style={{color: 'aliceblue', textDecoration: 'none'}} activestyle={{color: 'red'}}>OteyBakes</NavLink></li>
         <li><NavLink to="/" style={{color: 'aliceblue', textDecoration: 'none'}} activestyle={{color: 'red'}}>LLR</NavLink></li>
         <li><NavLink to="/" style={{color: 'aliceblue', textDecoration: 'none'}} activestyle={{color: 'red'}}>Shop</NavLink></li>
         <Switch> 

          <Route exact path='/' component={Main} />
          <Route exact path='/design' component={Design} /> 
          </Switch>
         </ul>
         {/* {Routes} */}
         
         
        
       </div>
      </div> 
      </div>
      </Router>
    );
  }

export default Nav;

从“React”导入React；
导入“/Nav.css”；
从“react Router dom”导入{BrowserRouter as Router}
从'react router dom'导入{NavLink，Switch}；
//从“../Routes”导入{Routes}；
导入浏览器路由器
从'react router dom'导入{Route}；
从“./Design”导入设计；
从“../Main”导入Main；
//从“react引导/Navbar”导入Navbar；
//从“react bootstrap/NavDropdown”导入NavDropdown；
常量导航=（）=>{
返回(
WKO

家
基础
设计
奥特贝克酒店
LLR
商店

{/*{Routes}*/}
);
}
导出默认导航；

---

提前感谢您的帮助

如果没有工作代码，有点难说， 但您可以尝试更改导航链接和路线：

<NavLink exact to="/" style={{/*your style'/}} activestyle={{color: 'red'}}>Home</NavLink>

---

如果没有工作代码，有点难说，
但您可以尝试更改导航链接和路线：

<NavLink exact to="/" style={{/*your style'/}} activestyle={{color: 'red'}}>Home</NavLink>

有关工作示例，请参见沙盒：


注:


路由器应该环绕index.js中的应用程序
交换机和路由应位于app.js中
aliceblue不是注册的css颜色
ul listStyleType删除项目符号，而不是li文本装饰
activestyle应该是activestyle
使用“渲染”而不是“组件属性”可获得更好的性能
为更干净的代码映射路线而不是硬代码
有关工作示例，请参见沙箱：


注:


路由器应该环绕index.js中的应用程序
交换机和路由应位于app.js中
aliceblue不是注册的css颜色
ul listStyleType删除项目符号，而不是li文本装饰
activestyle应该是activestyle
使用“渲染”而不是“组件属性”可获得更好的性能
为更干净的代码映射路线而不是硬代码
你甚至看不到导航？你在访问什么URL？@BillDoughty我在使用localhost，我只看到一个空白页面，你甚至看不到导航？你在访问什么URL？@BillDoughty我在使用localhost，除了一个空白页面，我什么也看不到