标签: react-router

我正在反应应用程序中实现路由,但现在我混淆了react-router 4.0优于react-router-redux,我也对react-router-dom感到困惑,反应路由器的优点和缺点是什么？ redux,react-router 4.0和react-router-dom？

我正在尝试在 create-reat-app 中使用 react-router 和 reactstrap。在路由页面中，我需要使用 reactstrap 的状态，因此我将路由器从变量转换为类。我收到此警告：警告： validateDOMNesting(...): <a> cannot appear as a descendant of <a>. 我不知道该怎么做？，我需要使用 reactstrap 来设置路由器导航的样式，所以我做了你在下面看到的。

由于很多原因，这不起作用：

<NavLink componentClass={Link} href="/contact" to="/contact" active={location.pathname === '/contact'}>anywords</NavLink>

<Navbar  dark id="RouterNavbar" expand="md">
          <NavbarBrand id="NavBrand"href="#x"><ul>(a bunch of li not relevant)</ul></NavbarBrand>
<NavbarToggler id="NavBarToggler"  onClick={this.toggle1.bind(this)}  />
          <Collapse  isOpen={this.state.isOpen1}  navbar>
            <Nav   className="ml-auto"  navbar>
            <NavItem>
                <NavLink href="#x"><Link id="RouterNavLink" style={None} to="/contact">anywords</Link></NavLink>
              </NavItem>
(then just more of the above)

除了几个 li 随机靠近彼此，我有时不得不刷新页面而不是正常行为（自动刷新）和我在控制台中收到的警告消息，没有什么不好的事情发生，但是当我读到这个的时候问题我发现我不应该这样做。

我捆绑了我的一个项目,它工作正常.但是当在路由/关于刷新时,它会显示在此服务器上找不到请求的URL/about.但是,当我在本地主机上从Web服务器上执行此操作时,它在刷新和前进/后退按钮上工作正常.我正在使用react-router进行客户端路由.

继承客户端路由,但我怀疑它的问题

 Router.run(routes, Router.HistoryLocation, function (Handler) {
    React.render(<Handler/>, app);
 });

我的路线就在那里:

let routes = (
<Route>
  <Route name = "App" path="/" handler = {App}>
    <Route name="About" path="/about" handler = {About}/>
    <DefaultRoute name="Projects" handler = {Projects}/>
  </Route>
</Route>
        );

这是我认为我破坏的APACHE:

<Directory /var/www/>
                # This directive allows us to have apache2's default start page
                # in /apache2-default/, but still have / go to the right place
Require all granted
                #RedirectMatch ^/$ /apache2-default/
        </Directory>

kkotwal.me.conf:

<VirtualHost *:80>
        # The ServerName directive sets the …

我正在尝试使用查询字符串设置Route路径.有些东西:

www.mywebsite.com/results?query1=:query1&query2=:query2&query3=:query3

我宁愿过渡到"结果"组件,如下所示:

<Route path="/" component={Main}>
  <IndexRoute component={Home} />
  <Route path="results?query1=:query1&query2=:query2&query3=:query3"
    component={SearchResults} />
</Route>

在SearchResults容器中,我希望能够访问query1,query2和query3参数.

我无法让它发挥作用.我收到以下错误:

bundle.js:22627警告:[react-router]位置"/ results？query1 = 1&query2 = 2&query3 = 3"与任何路由都不匹配

我尝试按照以下指南中的步骤操作:(部分:查询字符串参数怎么样？) https://www.themarketingtechnologist.co/react-router-an-introduction/

我可以在这里得到一些帮助吗？

我以为我开始理解React路由器了,但是当我添加一个为其组件加载css的库时,我遇到了一个新的墙.当从我家到导航到包含该组件的页面时,一切正常,但是当我刷新它时,字体的网址被破坏了......

我在这里和这里找到了一些指针,但到目前为止没有运气.这是一个常见的问题吗？如何解决它？

我使用webpack dev服务器,默认配置由yeoman脚手架构建.

我使用的库是React Fa来显示图标.

当我在http:// localhost:8000上加载我的应用程序/一切正常时,我导航到http:// localhost:8000/customer/ABCD1234/chat,我的图标都可以.字体已正确加载.

然后我刷新页面,我在控制台中看到:

DOMLazyTree.js？019b:56 GET http:// localhost:8000/customer/ABCD1234/assets/926c93d201fe51c8f351e858468980c3.woff2

这显然已被打破,因为客户部分不应该在这里......

到目前为止,这是我的路由器:

ReactDOM.render(
  <Router history={browserHistory}>
    <Route path='/' component={App}>
      <IndexRoute component={Index}/>
      <Route path='customer/:id'        component={Customer}    />
      <Route path='customer/:id/chat'   component={CustomerChat}/>
      <Route path="*"                   component={ NotFound }  />
    </Route>
  </Router>
, document.getElementById('support-app'));

我也尝试<base href="/"/>在我的index.html中添加一个,但是在控制台中我得到一个很好的红色警告,所以也许不是最好的主意:

警告:不建议使用自动设置basename,并将在下一个主要版本中删除.语义与basename略有不同.请在createHistory选项中明确传递basename

如何在反应路由器v4中对组件进行单元测试？我没有成功尝试使用jest和酶对重定向进行单元测试.

我的组件:

 const AppContainer = ({ location }) =>
  (isUserAuthenticated()
    ? <AppWithData />
    : <Redirect
        to={{
          pathname: "/login",
          state: { from: location }
        }}
      />);

我尝试测试它:

    function setup() {
  const enzymeWrapper = mount(
    <MemoryRouter initialEntries={["/"]}>
      <AppContainer />
    </MemoryRouter>
  );

  return {
    enzymeWrapper
  };
}

jest.mock("lib/authAPI", () => ({
  isUserAuthenticated: jest.fn(() => false)
}));

describe("AppContainer component", () => {
  it("renders redirect", () => {
    const { enzymeWrapper } = setup();

    expect(enzymeWrapper.find("<Redirect></Redirect>")).toBe(true);
  });
});

我有一个使用react构建的网站,它使用react-router.对于某些路由,我想要提供另一个页面或静态文件,但由于所有请求都被转发到反应路由器,因此它不起作用.

例如

www.myapp.com/sitemap.xml
www.myapp.com/something.html

^这些链接第一次工作,但是一旦我加载网站然后它不起作用,因为所有请求通过反应路由器.

任何使其始终有效的解决方案.谢谢.

编辑

我正在使用配置为将所有请求重定向到index.html的apache服务器,我想这就是这种行为的原因.这是我的配置,但我不知道如何解决这个问题.

Options -MultiViews
RewriteEngine On

RewriteCond %{HTTPS} off
RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R,L]

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]

更新 我尝试在答案中建议的解决方案

我的路线看起来像这样,对于something.html我正在加载ServerLoad组件

<Switch>
    <Route exact path="/" component={Home} />
    <Route path="/about" component={About} />
    <Route path="/about" component={About} />
    <Route path="something.html" component={ServerLoad} />
    <Route component={NoMatch} />
</Switch>

在ServerLoad组件的componentDidMount函数中,我做到了这一点.但它不起作用.

componentDidMount() {
    window.location.reload(true);
}

更多的 我已经安装使用create-反应,应用该项目,并通过快递服务的服务器它(像这样).我不确定我是否需要在那里进行一些设置以服务其他静态文件.

对于使用什么而言似乎有些混淆:

• <Link to='/some/path'>
• <Redirect to='/some/path'/>
• history.push('/some/path')

我一直在使用React/Router一段时间,不同的帖子/答案说明何时使用这些,有时它们与其他人说的不一致.所以我想我需要澄清一下.

根据我的理解Link和本文档:

为您的应用程序提供声明性,可访问的导航.

根据我的理解Redirect和本文档:

将导航到新位置.新位置将覆盖历史堆栈中的当前位置,如服务器端重定向(HTTP 3xx).

看起来我读过的所有帖子几乎每个人都Redirect用来浏览应用程序,没有人建议Link在这篇文章中使用.

现在history可以做同样的事情Link,Redirect除了我有一个历史堆栈跟踪.

问题1:我什么时候想使用Linkvs Redirect,另一个用例是什么？

问题2:既然history可以使用历史堆栈的额外奖励将用户路由到应用程序中的另一个位置,我应该在路由时始终只使用历史对象吗？

问题3:如果我想在应用程序之外进行路由,那么最好的方法是什么？锚标签,Window.location.href,Redirect,Link,以上都没有？

我正在寻找一种当React-Router v4 +更改位置时修改页面标题的方法。我曾经在Redux中侦听位置更改操作，然后针对某个metaData对象检查该路由。

使用React-Router v4 +时，没有固定的路由列表。实际上，站点周围的各种组件都可以使用Route相同的路径字符串。这意味着我使用的旧方法将不再起作用。

当某些主要路线发生更改时，是否可以通过调用操作来更新页面标题，还是有更好的更好的方法来更新网站的元数据？

我有如下标题组件：

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'}) …