javascript - 错误:您无法渲染在另一个里面. 你的应用程序中不应该有多个
问题描述
我在我的反应应用程序中收到此错误,因为我在路由器内使用路由器。我必须使用 Navbar.js 中的第二个路由器才能使用<Link>
. 我在 2 个不同的文件中使用反应路由器。如果我删除其中一个,它会抛出一个错误,说<Link>
未定义
这是我的代码:App.js
import { useState } from 'react';
import './App.css';
import Alert from './components/Alert';
import About from './components/About';
import Navbar from './components/Navbar';
import {
BrowserRouter as Router,
Route,
Routes,
Link
} from "react-router-dom"
import TextForm from './components/TextForm';
function App() {
const [mode, setMode] = useState("light");
const [alert, setAlert] = useState(null);
const showAlert = (message, type, symbolID, directory) => {
setAlert({
msg: message,
type: type,
symbolID: symbolID,
directory: directory
})
setTimeout(() => {
setAlert(null);
}, 2100);
}
const toggleMode = () => {
if(mode === "light"){
setMode("dark")
document.body.style.backgroundColor = "rgb(21 25 30)";
document.body.style.color = "white"; // #dadce0
showAlert("Dark Mode has been Enabled", "success", "check-circle-fill", "M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z");
}
else {
setMode("light")
document.body.style.backgroundColor = "white";
document.body.style.color = "black";
}
}
return (
<>
<Router>
<Navbar title="TakhtiUtils" mode={mode} toggleMode={toggleMode}/>
<Alert alert={alert}/>
<Routes>
<Route path="/About" component={About}>
<About/>
</Route>
<Route path="/" component={TextForm}>
<TextForm mode={mode} showAlert={showAlert} heading="Enter Some Text:"/>
</Route>
</Routes>
</Router>
</>
);
}
export default App;
这是 Navbar.js:
import React from 'react'
import {
BrowserRouter as Router,
Link
} from "react-router-dom"
export default function Navbar(props) {
return (
<Router>
<nav className={`navbar navbar-expand-lg navbar-${props.mode} bg-${props.mode}`}>
<div className="container-fluid">
<a className="navbar-brand" href="/">{props.title}</a>
<button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarNav">
<ul className="navbar-nav">
<li className="nav-item">
<Link className="nav-link active" aria-current="page" to="/">Home</Link>
</li>
<li className="nav-item">
<Link className="nav-link" to="/about">About</Link>
</li>
</ul>
</div>
</div>
<div className={`form-check form-switch text-${props.mode==='light'?'dark':'light'}`}>
<input className="form-check-input" onClick={props.toggleMode} type="checkbox" role="switch" id="flexSwitchCheckDefault"/>
<label className ="form-check-label" htmlFor="flexSwitchCheckDefault">Dark Mode</label>
</div>
</nav>
</Router>
)
}
你能告诉我一种在两个组件中使用一个反应路由器的方法吗?谢谢你!
解决方案
你不应该在导航栏中使用其他路由器看来你需要在导航栏中使用 NavLink
import {Link, NavLink} from "react-router-dom";
<NavLink to="/faq" activeClassName="selected">
FAQs
</NavLink>
推荐阅读
- java - Java:Threadpoolexecutor - 使用作业列表提交作业?
- laravel - 带有 Socket/Redis 的 Laravel - 私有通道路由不起作用
- android - 多布局基础语言环境 - Android
- javascript - 无法将获取的数据推送到全局数组中的函数
- slack-api - 当机器人在松弛的交互式消息中替换消息时如何禁用自动滚动?
- knockout.js - 有没有办法使用 KnockoutJS 将 XML 文件转换为 CSV?
- asp.net - 无法在 C# windows 窗体中创建新的子窗体
- tensorflow - 如何运行 TensorFlow 聚类算法模型
- ios - 预计解码 Int 但找到了一个数字
- python - 有效地返回数组中第一个满足条件的值的索引