相关疑难解决方法(0)

如何在React路由器中将DefaultRoute设置为另一个路由

我有以下内容:

  <Route name="app" path="/" handler={App}>
    <Route name="dashboards" path="dashboards" handler={Dashboard}>
      <Route name="exploreDashboard" path="exploreDashboard" handler={ExploreDashboard} />
      <Route name="searchDashboard" path="searchDashboard" handler={SearchDashboard} />
      <DefaultRoute handler={DashboardExplain} />
    </Route>
    <DefaultRoute handler={SearchDashboard} />
  </Route>
Run Code Online (Sandbox Code Playgroud)

使用DefaultRoute时,SearchDashboard呈现不正确,因为任何*Dashboard都需要在Dashboard中呈现.

我希望"app"路由中的DefaultRoute指向Route"searchDashboard".这是我可以使用React Router做的事情,还是应该使用普通的Javascript(用于页面重定向)?

基本上,如果用户转到主页,我想将它们发送到搜索仪表板.所以我想我正在寻找相当于的React Router功能window.location.replace("mygreathostname.com/#/dashboards/searchDashboard");

javascript routes url-redirection reactjs react-router

77
推荐指数
8
解决办法
10万
查看次数

React Router v6 在组件之外导航

在react-router v5中我创建了这样的历史对象:

import { createBrowserHistory } from "history";
export const history = createBrowserHistory();
Run Code Online (Sandbox Code Playgroud)

然后将其传递给路由器:

import { Router, Switch, Route, Link } from "react-router-dom";
<Router history={history}>
 ... my routes
</Router>
Run Code Online (Sandbox Code Playgroud)

我这样做是为了有机会在组件之外使用历史记录:

   // store action
    logout() {
        this.user = null;
        history.push('/');
    }
Run Code Online (Sandbox Code Playgroud)

通过这种方式,我将逻辑移至商店,并且组件尽可能保持干净。但现在,在 React Router v6 中我不能做同样的事情。我仍然可以useNavigate()在我的组件内部使用它进行导航,但我无法创建一个navigate将其使用到我的商店中的组件。还有其他选择吗?

javascript reactjs react-router react-router-dom

54
推荐指数
3
解决办法
6万
查看次数

React-router-dom 无法与 Vite 配合使用

我正在构建一个基于 React 和 Vite 的 Web 应用程序。我还用来react-router-dom创建进入我的应用程序的导航,但是当我进入主页时,我的浏览器控制台中出现此错误:

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/react-router-dom.js?v=67b79ac4' does not provide an export named 'Redirect'

我正在尝试使用react-router-dom. 这是我的App.jsx代码:

import { BrowserRouter as Router, Switch, Route, Redirect } from "react-router-dom"

import Header from "./routes/Header/Header";
import Home from "./routes/Home/Home.jsx";
import AboutMe from "./routes/AboutMe/AboutMe.jsx";
import Portfolio from "./routes/Portfolio/Portfolio.jsx";
import Socials from "./routes/Socials/Socials.jsx";

function App() {

  return (
    <div className="App">
      <Router>
        <Header />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route exace path="/about-me" component={AboutMe} /> …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs react-router-dom vite

5
推荐指数
1
解决办法
1万
查看次数