标签: react-router-dom

React 本身引入了使用 Suspense 和 Lazy 的代码分割和异步路由的新概念。有了这个概念，我们如何才能在路线改变时在页面顶部显示进度条呢？我可以显示加载图标、文本等，但不能显示进度条（0 到 100%）。这是我的做法

const About = lazyLoading(() => import("./components/About"), {
  fallback: <h1>Loading...</h1>
});
const Home = lazyLoading(() => import("./components/Home"), {
  fallback: <h1>Loading...</h1>
});

const BasicExample = () => {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>

        <hr />

        <Route exact path="/" render={() => <Home name="hello" />} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
};
render(<BasicExample />, document.getElementById("root"));

延迟加载.js

const lazyloading = (importFunc, { fallback = null }) …

window.createObjectUrl()创建一个形状为 的 URL blob:http://domain/generatedString，我尝试在 an 中使用此 URI，<iframe>但它似乎不起作用，因为react-router如果没有任何规则匹配，则会将我重定向到主页，因为它有一个如下所示的开关：

<Switch>
  <Route exact path="/" component={Home} />
  <Route exact  path="/a" component={A} />
  <Route exact  path="/b" component={B} />
  <Route component={nomatch} />
</Switch>

如何为这些 blob URI 之一制定规则？

编辑：好吧，答案不是反应路由器，而是其他东西弄乱了我的斑点。可悲的是，我不记得那是什么了。但是嘿，现在你知道它不是react-router :+)

当路由更改时，我在渲染组件时遇到了一个奇怪的问题。\n我使用的版本

{\n  "react": "16.9.0",\n  "react-dom": "16.9.0",\n  "react-router-dom": "5.1.0"\n}\n

这是我的路线配置

const Routes = () => {\n    const isLoggedIn = StorageManager.get(\'session\');\n    return (\n        <>\n            <div className="background"></div>\n            <MainLayout>\n                <Header />\n                <LeftSidebarMenu />\n                <main className="main-container">\n                    <Router history={history}>\n                        <Switch>\n                            <Redirect exact from="/" to="/categories" />\n                            <Route exact path=\'/categories\' component={Home} />\n                            <Route exact path=\'/categories/new\' component={CreateCategory} />\n                            <Route exact path=\'/login\' component={Login}\n                                />\n                        </Switch>\n                    </Router>\n                </main>\n            </MainLayout>\n        </>\n    );\n};\n\nexport default Routes;\n

主要问题是，当用户单击登录/注销时，如果成功/失败，它应该将用户重定向到适当的页面。实际上路线发生了变化，但组件没有被渲染。我使用history.push(PATH)来重定向用户。我不是react初学者，说实话，我第一次遇到这种奇怪的问题。也许我把一些东西与我的路由器配置混淆了。

import React, {useState} from \'react\';\nimport {withRouter, Link} from \'react-router-dom\';\nimport Modal …

我的反应应用程序react-router-dom无法工作。它显示错误

类型错误：path_to_regexp__WEBPACK_IMPORTED_MODULE_8___default.a.compile 不是函数

查看图像

我不知道为什么会显示 react-router-dom 的错误问题

检查我的代码

该代码显示错误

import React from 'react'
import DefaultLayout from './Component/Layout/DefaultLayout';
import DefaultLogin from './Component/Login/DefaultLogin';
import DefaultSignup from './Component/Sign-up/DefaultSignup';



// react-router-dom

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


// bootstrap css
import 'bootstrap/dist/css/bootstrap.min.css';

// css for global 
import './App.scss';


export default function App() {
    return (
        <>
            <Router>   

                <Switch> 
                        <Route path="/admin" exact component={DefaultLayout} />
                        <Route path="/admin/signup"  component={DefaultSignup} />
                        <Route path="/admin/login"  component={DefaultLogin} />
                        <Redirect from="/" to="/admin" />
                </Switch> 


            </Router>            
        </>
    ) …

我正在尝试使用title从 props 传递到我的Dishes组件<Link>，但找不到解决方案。有什么建议吗？

import { Link } from "react-router-dom";

const Category = ({ title }) => {
  return (
    <Link to="/dishes">
      {title}
    </Link>
  );
};

export default Category;

App.js看起来像这样：

return (
    <Router>
      <div className="App">
        <Route
          path="/"
          exact
          render={(props) => (
              <Categories recipes={recipes} />
          )}
        />
        <Route path="/dishes" component={Dishes} />
      </div>
    </Router>
  );

我将react-router和react-router-dom6.0.0-beta.0从v4升级到了，从那时起我收到了这个错误。我没有在应用程序的任何地方使用 match.path 。

dependencies {
 "@types/react-router": "^4.0.28",
 "@types/react-router-dom": "^4.2.7",
 "react-router": "^6.0.0-beta.0",
 "react-router-dom": "^6.0.0-beta.0",
 "history": "^5.0.0"
}

/Users/..../../node_modules/@types/react-router-dom/index.d.ts
(10,10): Module '"../../../../../../../../Users/allans/Desktop/../../node_modules/react-router"' has no exported member 'match'

对于此问题，没有足够的文档。

我想在用户输入请求的信息后在组件之间切换。
将按此顺序向用户显示的组件：

1. {MobileNum } 输入手机号码
2. {IdNumber } 身份证号码
3. {CreatePassword } 创建密码

当所有这些步骤完成后，浏览器将切换到主页。用户必须无法在页面之间移动，直到他填写了每个组件中的每个请求。

现在我想要一种更好的路由器方式，就好像我里面有 3-4 个组件Login，并且必须在安全的乳清中，而且用户不能通过 URL 手动切换组件。

import React, { Component } from 'react';
import {
  BrowserRouter as Router,
  Redirect,
  Route,
  Switch,
} from 'react-router-dom';
import MobileNum from './MobileNum.jsx';
import IdNumber from './IdNum.jsx';
import CreatePassword from './createPassword .jsx';

class SignUp extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <Router>
          <Switch>
                //// Here needs to know how to navigate to each component …

我正在使用 React 17.0.2 并定义了如下路由：

export const PATH = {
  editProduct: '/edit-product/:productId'
}
export const routes = [
  {
    path: PATH.editProduct,
    render: (props) => <Product {...props}/>
  }
]
export const useRoutes = () => ({ PATH, routes });

然后将路由与“react-router-dom”版本一起使用：^5.2.0

以前的一些没有routeparams的路径使用history.push(PATH.somePath);并且它可以工作，但我想在某些组件中使用react routerParams。

喜欢：

history.push({pathname: PATH.editProduct, routerParam: {productId: "2"} });

以前带有routeparams的路径是通过不使用PATH变量来传递的，而是输入字符串，就像history.push('/edit-product/' + productId);我想重用PATH变量一样，但我不知道如何巧妙地实现它。

如果我在history.push方法中使用PATH.editProduct，它会将routeparam与它一起放置，如/edit-product/:productId，这不是我正在寻找的行为。历史上有没有routeparams的解析方法？

我有 React 网站，其中路由是使用react-router-dom 完成的，并且使用 localhost 一切正常。但在我的生产服务器上，无论我使用哪个 Web 服务器（Nginx 或 Apache2 或 Apache2 + Nginx）以及https://example.com/admin/list等嵌套链接，我都会收到错误：

Uncaught SyntaxError: Unexpected token '<'    2.a3028c0a.chunk.js:1
Uncaught SyntaxError: Unexpected token '<'    main.1b4093c1.chunk.js:1 
Manifest: Line: 1, column: 1, Syntax error.   manifest.json:1

当您通过按钮转到嵌套链接时，一切正常。

 <NavLink to="/admin/asics">

但刷新或直接进入后我收到此错误。

使用像https://example.com/admin这样的单个链接，一切都很好。

嵌套路由是如何完成的

应用程序.js

<BrowserRouter basename="/">
  <Switch>
    <Route exact path="/" component={Miners} />
    <Route path="/admin" component={Admin} />
    <Route path="/gratitude" component={Gratitude} />
    <Route path="/firmware" component={Firmware} />
    <Redirect to="/" />
  </Switch>
</BrowserRouter>

管理.js

<BrowserRouter>
  <Switch>
    <Route exact path="/admin/asics" component={Panel} />
    <Route path="/admin/advertising" …

当我使用此代码从 url 路径获取 id 时（http://127.0.0.1:8083/#/zhuolian/activity/detail/1：

import { useParams } from "react-router-dom";\n\n\n  handleSearchInfo = () => {\n    const {id} = useParams();\n\n    const { dispatch } = this.props;\n    dispatch({\n      type: 'activityM/getActivityDetail',\n      payload: { pageSize: 10, pageNum: 1 ,id: id},\n    });\n  };\n

显示这样的错误：

TypeError: (0 , _reactRouterDom.useParams) is not a function\nTableList._this.handleSearchInfo\nsrc/pages/xRepo/Activity/detail.js:166\n  163 |   }\n  164 | ];\n  165 | \n> 166 | handleSearchInfo = () => {\n      | ^  167 |   const {id} = useParams();\n  168 | \n …