标签: react-router

我有如下标题组件：

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

const Header = () => {
   let route = useLocation().pathname; 
   return route === "/user" ? <ComponentA /> : <ComponentB />;
}

您将如何模拟这个 useLocation() 以获取用户路径？

我不能简单地在我的测试文件中调用 Header 组件，因为我收到错误：

类型错误：无法在 useLocation 读取未定义的属性“位置”

describe("<Header/>", () => {
    it("call the header component", () => {
        const wrapper = shallow(<Header />);
        expect(wrapper.find(ComponentA)).toHaveLength(1);
    });
});

我试过看起来类似于链接如何使用新的反应路由器钩子测试组件？但它没有用。

我试过如下：

const wrapper = shallow(
      <Provider store={store}>
        <MemoryRouter initialEntries={['/abc']}>
          <Switch>
            <AppRouter />
          </Switch>
        </MemoryRouter>
      </Provider>,
    );
    jestExpect(wrapper.find(AppRouter)
      .dive()
      .find(Route)
      .filter({path: '/abc'}) …

单击“开始测验”按钮时，我试图导航到“/quiz”。

但是，当我编译代码时，我在网站应用程序上收到以下错误：[Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

我是新来的，如果有人能帮助我，我将不胜感激！

这是我的 App.js 代码：

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Footer from "./components/Footer/Footer";
import Header from "./components/Header/Header";
import Home from "./Pages/Home/Home";
import Quiz from "./Pages/Quiz/Quiz";
import "./App.css";
function App() {
  return (
    <BrowserRouter>
      <div className="App" style={{ backgroundImage: "url(./circle.jpg)" }}>
        <Header />
        <Routes>
          <Route exact path="/" component={Home} />
          <Route path="/quiz" component={Quiz} />
          <Home />
        </Routes>
      </div>
      <Footer />
    </BrowserRouter> …

我的应用程序中有公共区域和私有区域,我希望能够在公共视图中的任何位置显示登录模式对话框.模态应该有自己的路线.第二个用例是私有区域中的配置文件模式.

问题是当显示模态时,背景中的当前视图将消失,因为模态不是当前视图路径的子视图.

由于我不想为每个可能的视图路径添加相同的模态,因此问题是:是否可以将模态路由与其父路由分离并在应用程序中的任何位置显示它们而不进行主要内容呈现？对此最好的方法是什么？我发现了这个问题,但似乎不是同一个问题.

模态路线上的浏览器刷新在后台不会呈现任何内容,但这是我可以忍受的问题.

我在React Router中使用Webpack dev服务器和browserHistory来通过HTML5 History API操作url.historyapifallback-option在我的webpack配置文件中不起作用.刷新后http://localhost:8080/users或http://localhost:8080/products我得到404.

webpack.config.js

var webpack = require('webpack');
var merge = require('webpack-merge');

const TARGET = process.env.npm_lifecycle_event;

var common = {
    cache: true,
    debug: true,
    entry: './src/script/index.jsx',
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    output: {
        sourceMapFilename: '[file].map'
    },
    module: {
        loaders: [
            {
                test: /\.js[x]?$/,
                loader: 'babel-loader',
                exclude: /(node_modules)/
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: "jquery",
            jQuery: "jquery"
        })
    ]
};

if(TARGET === 'dev' || !TARGET) …

使用较新版本的React Router,如果使用browserHistory.push()进行转换,如何将参数传递给转换到的路径？如果browserHistory不允许这样做,我愿意使用其他方式进行转换.我看到在React Router中我最顶级的子组件中有this.props.routeParams,但我似乎无法在转换时使用前一个路由中的值填充这个值.

我使用History包将无效的URL重定向到我的react组件上的404页面.

我使用.replace而.push不仅仅是因为我不希望浏览器记录我访问过的任何无效网址.

我错过了这一点吗？在为我的目的选择一个或另一个之间是否需要权衡？

有人可以向我解释一下吗？提前致谢 ;)

我有以下场景:

用户打开激活链接; 用户完成激活过程后,系统会将它们移动到另一个页面.
我不想在浏览器的历史记录中保留激活链接,因为当用户返回时,他们将再次进入激活步骤.

如何替换浏览器的历史记录以从我的应用程序中删除某些请求？

我刚开始学习React并且遇到了这个错误.

未捕获的TypeError:无法在新路由器上读取未定义的属性"pathname"

这是我的代码:

var React = require('react');
var ReactDOM = require('react-dom');
var { Route, Router, IndexRoute } = require('react-router');
var hashHistory = require('react-router-redux')

var Main = require('./components/Main');

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Main}>

        </Route>
    </Router>,
  document.getElementById('app')
);

我以下的教程使用React-Router 2.0.0,但在我的桌面上我使用的是4.1.1.我尝试搜索更改,但未能找到有效的解决方案.

"dependencies": {
"express": "^4.15.2",
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"react-router-redux": "^4.0.8"

我正在使用ReactJS和React Router一起进行项目(没有redux)我想以编程方式打开链接但是在新选项卡上.我知道使用 onClickNode={e => this.props.history.push('/${e.data.node.id}')}我可以转到所需的链接,但问题是它在同一个选项卡中打开.此外,没有办法在该函数中使用JSX,因此无法添加<Link>组件.

(我使用的是React Router v4)

现在我在反应中有这个功能，我正在使用它来返回登录并检查重置我正在使用该功能的 localStorage 值，而不是因为使用它我无法重置本地存储值。功能如下：-

logout(){
    localStorage.clear();
    console.log("cliasdk");
    return(
        <Redirect to="/login"/>
    )
  }

这在单击 div 时执行，但我无法转到 /login 页面。如何做？