标签: react-router-v4

我遇到了反应路由器编码空格的问题，但没有与符号的问题。所以localhost:8080/you & me被编码为localhost:8080/you%20&%20me而不是localhost:8080/you%20%26%20me，我正在使用一个奇怪的黑客来解码然后重新编码所有内容。我想知道是否有人可以推荐更好的解决方案。

它以某种方式正常工作react-scripts start。但是当尝试通过故事书查看各个组件时，它会抛出一个错误，就像上面标题中所说的那样。

这是我的代码。

index.tsx

import React from \'react\';\nimport ReactDOM from \'react-dom\';\nimport \'./index.css\';\nimport App from \'./App\';\nimport * as serviceWorker from \'./serviceWorker\';\n\n\nReactDOM.render(<App />, document.getElementById(\'root\'));\n

App.tsx

import React from \'react\';\nimport\xc2\xa0{\xc2\xa0BrowserRouter,\xc2\xa0Route,\xc2\xa0Switch, Link\xc2\xa0}\xc2\xa0from\xc2\xa0"react-router-dom";\nimport { Register } from \'./pages/register/register\'\nimport { Login } from \'./pages/login/login\'\nimport { Home } from \'./pages/home/home\'\n\nconst App: React.FC = () => {\n  return (\n    <div id="app-root">\n      <BrowserRouter>\n        <Switch>\n          <Route path="/" exact component={Home} />\n          <Route path="/register" exact component={Register} />     \n          <Route path="/login" exact component={Login} />\n        </Switch>\n      </BrowserRouter>\n …

在我的应用程序中，我有一个查询字符串，我想在单击按钮后将其删除。

我得到这样的查询字符串：

  import qs from 'query-string'
  // ..

  const { search } = url
  const { id } = qs.parse(search)

然后，当我单击按钮时，我想删除字符串而不重新加载页面。

  const onClick = () => {
     history.push({})
  }

然而上面的代码并没有按预期工作。

我有以下路线:

<Switch>
  <Route path='/:profileType/:profileId' component={Profile}/>
  <Route path='/about/:aboutThing' component={AboutThing}/>
</Switch>

当我尝试去/about/:aboutThing- 它被认为是一条{Profile}路线.这是有道理的,因为技术上:profileType可以是任何字符串,因此任何嵌套路由都将被识别为Profile.

我想知道是否可以在{AboutThing}不改变路线的情况下进行渲染.从技术上讲,/about应该是该路线的保留字.我试过做:

<Route exact path='/about/:aboutThing' component={AboutThing}/>

但这也不起作用.尝试不必在该路径中添加额外的字符串以使其工作.有什么想法/想法吗？

我正在尝试创建简单的 React-Redux-Router V4 应用程序。到我的组件之一的路由使用了 url 参数。在我的Route组件中，我一直在传递renderprop，它是一个返回组件的匿名函数。就像这样：

<Route key="post" path="/post/:id" render={() => <Post/>} />

我使用这个道具而不是道具component：

<Route key="post" path="/post/:id" component={Post} />

因为我无法使用componentprop 将 props 添加到渲染的组件中。问题是，使用componentprop，您可以使用props.match.params.name，它将包含我需要的确切参数。使用该组件时此功能不可用render。

可以用window.location.href，但是感觉很脏。

谢谢！

我知道我不是唯一面临这个问题的人，但在网上搜索了一段时间并尝试了它给我的一切之后，我必须在这里询问我的情况。

每当我尝试访问我的应用程序的路线时，我都会收到一个流行的错误，即在不使用与应用程序相关的方式时收到 404。例如，如果我在“/map”时刷新页面，它会显示“无法获取/map”。

这是我当前的配置，虽然我尝试了几个不同的 devServer: {} 设置并使用 publicPath 等：

webpack.config.js：

const path = require("path");

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: "bundle.js",
        path: path.resolve(__dirname, "dist"),
        publicPath: "dist"
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            }
        ]
    },
    devServer: {
        historyApiFallback: {
            index: "dist/index.html"
        }
    }
};

应用程序.js

import React, { Component } from "react";
import { connect } from "react-redux";

import { BrowserRouter, Route } from "react-router-dom";

import Homescreen from "./Homescreen";
import Map from …

我正在尝试学习ReactJS,当涉及到嵌套路由时,新的React路由器真的让我感到困惑.

我想要有三条路线,如下所示 / - home Page /users - list all the users /users/add - add user form

您可以在下面看到完整的代码示例

查看codesandbox.io中的代码

当我点击/或/users它工作正常.但是,当我到达/users/add路由器渲染空白页而不是AddUser组件时.

我知道我可以在index.js中定义绝对路由,就像/users和/users/add.但我有点想要有一种更可维护的方法来定义子组件内的路由器.

知道如何解决这个问题吗？

// src/index.js 
render(
  <BrowserRouter>
    <div>
      <Route exact path="/" component={App} />
      <Route path="/about" component={About} />
      <Route exact path="/users" component={UserLayout} />
    </div>
  </BrowserRouter>,
  document.getElementById("root")
);



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

    render() {
      return (
        <div className="users">
          <Route exact path={this.props.match.path} component={Users} />
          <Route path={`${this.props.match.path}/add`} component={AddUser} />
        </div> …