npm run start在终端中运行时出现以下错误。
尝试导入错误：“重定向”未从“react-router-dom”导出。
我已经重新安装了node_modules，，react-router-dom。react-router还重新启动了终端和我的计算机，但问题仍然存在。
我的代码：
import React from 'react';
import { Switch, Redirect } from 'react-router-dom';
import { RouteWithLayout } from './components';
import { Minimal as MinimalLayout } from './layouts';
import {
Login as LoginView,
Dashboard as DashboardView,
NotFound as NotFoundView
} from './views';
const Routes = () => {
return (
<Switch>
<Redirect
exact
from="/"
to="/dashboard"
/>
<RouteWithLayout
component={routeProps => <LoginView {...routeProps} data={data} />}
exact
layout={MinimalLayout}
path="/login"
/>
<Redirect to="/not-found" /> …我正在使用 React Router v6 并为我的应用程序创建私有路由。
在文件PrivateRoute.js中，我有代码
import React from 'react';
import {Route,Navigate} from "react-router-dom";
import {isauth} from 'auth'
function PrivateRoute({ element, path }) {
const authed = isauth() // isauth() returns true or false based on localStorage
const ele = authed === true ? element : <Navigate to="/Home" />;
return <Route path={path} element={ele} />;
}
export default PrivateRoute
在文件route.js中我写的是：
...
<PrivateRoute exact path="/" element={<Dashboard/>}/>
<Route exact path="/home" element={<Home/>}/>
我已经完成了相同的示例React-router Auth 示例 - StackBlitz，文件 App.tsx
我有什么遗漏的吗？
我正在尝试升级到 React Router v6 ( react-router-dom 6.0.1)。
这是我更新的代码：
\nimport { BrowserRouter, Navigate, Route, Routes } from \'react-router-dom\';\n\n<BrowserRouter>\n <Routes>\n <Route path="/" element={<Home />} />\n <Route path="/lab" element={<Lab />} />\n <Route render={() => <Navigate to="/" />} />\n </Routes>\n</BrowserRouter>\n最后Route是将其余路径重定向到/.
但是，我收到了一个错误
\n\n\nTS2322：类型 \'{ 渲染：() => 元素；}\' 不可分配给类型“IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)\”。\xc2\xa0\xc2\xa0Property \'render\' 在类型 \'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)\' 上不存在。
\n
然而，根据文档，它确实有renderfor Route. …
我正在尝试在我的 React 应用程序中使用react-router-dom，并且我正在使用打字稿而不是 javascript。这里的问题是我无法将 Route 导入到我的组件中并使其工作。我已经安装了@types/react-router-dom，但由于某种原因它仍然无法按预期工作。
这是一个正在尝试使用的组件react-router-dom
import {BrowserRouter as Router, Route} from "react-router-dom";
const App = () => {
return (
<div>
<Router>
<div>
<Route path="/" exact/>
</div>
</Router>
</div>
)
}
export default App;
这就是我收到的错误
TypeScript error in /Users/veselinkontic/Projects/givellet/frontend/src/components/index.tsx(9,37):
Type '{ path: string; exact: true; }' is not assignable to type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'.
Property 'exact' does not exist on type 'IntrinsicAttributes & (PathRouteProps | LayoutRouteProps | IndexRouteProps)'. TS2322 …我第一次尝试使用路由并遵循Udemy的确切说明：
import { Route } from "react-router-dom";
import Welcome from "./Pages/Welcome";
import Game from "./Pages/Game";
import Leaderboard from "./Pages/Leaderboard";
function App() {
return (
<div>
<Route path = "/welcome">
<Welcome />
</Route>
<Route path = "/game">
<Game />
</Route>
<Route path = "/leaderboard">
<Leaderboard />
</Route>
</div>
);
}
export default App;
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from "./App";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
); …我已经安装了react-router-domV6-beta。通过遵循网站上的示例，我可以使用新选项useRoutes设置页面路由并将其返回到App.js文件中。
保存后我收到以下错误：
错误：useRoutes() 只能在组件上下文中使用。
我想知道我是否在这里遗漏了一些东西？我已经在文件夹内创建了页面src/pages。
我的代码：
import { BrowserRouter, Link, Outlet, useRoutes } from 'react-router-dom';
// Pages
import Home from './pages/Home';
import About from './pages/About';
import Services from './pages/Services';
import Gallery from './pages/Gallery';
import Prices from './pages/Prices';
import Contact from './pages/Contact';
const App = () => {
const routes = useRoutes([
{ path: '/', element: <Home /> },
{ path: 'o-nama', element: <About /> },
{ path: 'usluge', element: <Services /> }, …是否可以获得当前匹配路由的路径模式？例子：
<Route
path=":state/:city*"
element={
<Page />
}
/>
<Route
path=":state/:city*"
element={
<Page />
}
/>
我知道我可以用来useMatch检查当前位置是否与特定路径模式匹配，但组件必须知道路径模式是什么。
我有一个导航栏，当路线单击时发生变化时，它会在每条路线中呈现。
./components/navbar.jsx
import React, { Component } from 'react';
import '../App.css';
import { Link } from 'react-router-dom';
class Navbar extends Component {
constructor(props) {
super(props);
this.state = {};
}
render() {
return (
<div id = 'navbar'>
<div className='name-head'>
My Name
</div>
<div id = 'nav-links-container'>
<Link to='/experiences'>
<div className = 'nav-links'>
Experiences
</div>
</Link>
<div className = 'nav-links'>
Projects
</div>
<div className = 'nav-links'>
Skills
</div>
<div className = 'nav-links'>
Resume
</div>
</div>
</div>
);
}
}
export default …有人可以解释之间的区别
<Route exact path="/" component={Home} />
和
<Route path="/" component={Home} />
我不知道'确切'的含义
React-router-dom 的版本是 v6，我在使用 Navigate 将值传递到另一个组件时遇到问题。
我想将选定的行传递到另一个名为“报告”的页面。但是，我不确定我是否使用了正确的navigate方法语法，并且我不知道如何在报告组件中获取该状态。
redirectToReport(rowData)Material-ui 表：我正在尝试在参数中使用onClick。
function TableRows(props){
return (
<MaterialTable
title="Leads"
columns={[
...
]}
data = {props.leads}
options={{
selection: true,
filtering: true,
sorting: true
}}
actions = {[{
position: "toolbarOnSelect",
tooltip: 'Generate a report based on selected leads.',
icon: 'addchart',
onClick: (event, rowData) => {
console.log("Row Data: " , rowData)
props.redirect(rowData)
}
}]}
/>
)}
LeadTable 组件
export default function LeadTable(props) {
let navigate = useNavigate();
const [leads, setLeads] = useState([]);
const …