标签: react-router-v4

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 :+)

我想导出组件，withRouter()但我需要在没有默认值的情况下命名它

export default withRouter(TopNav); 

我试过了

export {TopNav} withRouter(TopNav); 

我从 linter 得到的错误是......

Use of default exports is forbidden (no-default-export)tslint(1) is there a way name the export?

我的反应应用程序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>            
        </>
    ) …

这是专门针对 React-router 版本 5 的。

我试图获取从 React-router 传递到 LandingPage 组件的 prop。但是 LandingPage 组件似乎没有 prop 值。我看到的唯一道具是比赛、地点、历史。

我的代码相当简单。请让我知道我在这里缺少什么？

import React from 'react';
import ReactDOM from 'react-dom';
import landingPageBkg from "../../../public/assets/justice.jpg";



class LandingPage extends React.Component {

    componentDidMount() {
        setTimeout(()=>{
            this.props.history.push('/pagenotfound');
        },3000)
    }
 
  render() {
      console.log('this.props',this.props);
    return (
      <div className="landingPageImg">
        <p> {this.props.text} </p>
        <img src={landingPageBkg} className="landingPageImg"/>
      </div>
    );
  }
}

export default LandingPage;



import React from 'react';
import { BrowserRouter, Route, link, NavLink, Switch } from 'react-router-dom';
import LandingPage from '../screens/LandingPage/LandingPage.js'
import PageNotFound from …

我目前正在尝试使用Material-UI 的抽屉组件实现一个网站。它有效，当我单击抽屉项目时，它会将我引导到正确的页面。
但是我如何让各个抽屉项目突出显示它所在的当前页面。

例如，如果我位于 /dashboard 页面上，并且仪表板页面的抽屉项目应突出显示（不同的颜色和样式）以指示我当前动态位于该页面上。
尚未设法在网上找到任何好的解决方案，并且 Material-UI 文档也没有演示如何实现这一点，很高兴听到你们都是如何做到的。

以前,我能够使用浏览器历史记录重新路由用户(例如,成功登录):

import { browserHistory } from 'react-router'

browserHistory.replace('/home')

在新的react-router中,我无法再导入browserHistory,实现目标的另一种方法是什么？

在旧版本中,我可以在我的组件中使用setRouteLeaveHook.

例如(SO):检测用户离开页面

使用react路由器v4,逻辑已经从注入路由器本身转移到组件中,我只在路由器v4上找到了以下功能:

BrowserRouter.getUserConfirmation

我有点困惑,为什么我应该将确认行为与路由器本身联系起来,而不是与特定组件链接!？

在离开我的组件(链接到我当前的路线)时,如何在处于某种状态时放置确认窗口？这似乎不受上述功能的支持.

我安装了react-router-dom4.1.1并在尝试渲染我的组件时继续收到以下错误:

未捕获错误:React.Children.only预计会收到一个React元素子级.

这是我的app.js档案:

import React from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom';
import Nav from './components/Nav/nav';
import Search from './components/Search/search';
import Favorites from './components/Favorites/favorites';

const App = () => (
 <Router>
    <div className="app">
      <Nav />
      <Route exact path="/" component={Search}/>
      <Route path="/favorites" component={Favorites}/>
    </div>
  </Router>
);

export default App;

这是nav.jsx:

import React from 'react';
import {BrowserRouter as NavLink} from 'react-router-dom';

const Nav = () => (
    <ul className="nav">
        <li><NavLink exact to="/" …

我正在使用最新的React和React Router版本构建一个Web应用程序，在我的情况下，我的应用程序支持多种语言，并且由于建立了索引，因此每种语言都有单独的html文件。因此，对于像myapp.com这样的网址，

myapp.com/en/-英文

myapp.com/de/-适用于德语等...

在服务器端，每个/ en /文件夹当然都有自己的index.html文件，其中包含以给定语言编写的meta，title和其他元数据，并且它们都可以进入我们的React应用程序（bundle.js）

我以前已经使用Router Hash History构建了类似的东西，所以我的应用程序看起来像myapp.com/en/#/home，而我在route.js中的主要路由当然是这样的

<Route path="/" component={MainComponent}

现在，我要使用BrowserRouter，并且如果URL为myapp.com/en/ ，则我的路由应如下所示：

<Link to="/home" />

单击后，将带您到myapp.com/en/home，它将正确呈现在Route中与其链接的组件

 <Route path="/home" exact component={HomeContainer} />

基本上目前这只有在我做了这样的事情时才有效

<Link to=`/${getCurrentLanguage()}/home` /

路线是这样的

<Route path=`/${getCurrentLanguage()}/home` exact component={HomeContainer} />

这当然是最疯狂的

我如何才能达到预期的行为？或者您有其他不同的想法吗？谢谢

编辑我没有问任何关于React翻译的问题，我将使用i18next来翻译React方面，我问的是使用不同index.html文件进行路由的问题

我想知道我必须采用哪种解决方案来解决以下问题：

我不使用任何状态管理库。我“只使用” React。

全局应用程序状态存储在组件中<MyFoodApp/>。它包含一组餐厅对象。

该组件RestaurantPage用于显示餐厅的详细信息，并允许创建新的评论。

在这一点上，我陷入了困境，因为我需要更新 restaurant以的状态存储的特定对象<MyFoodApp />才能添加此提交的评论。

我曾经通过作为道具传递给子组件的函数来更新状态，但是在这种情况下我不能这样做，因为MyFoodApp它不是的父项RestaurantPage。

我是否必须设置Redux以解决此问题，或者有任何解决方法？

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router, Link, Route, Switch } from 'react-router-dom';

import EasyFoodApp from './js/components/EasyFoodApp';
import RestaurantPage from './js/components/RestaurantPage';
import NotFound from './js/components/NotFound';

class Root extends React.Component {
    render() {
        return (
            <Router>
                <div className="router">
                    <Switch>
                        <Route exact path="/" component={MyFoodApp} …