标签: react-router

我捆绑了我的一个项目,它工作正常.但是当在路由/关于刷新时,它会显示在此服务器上找不到请求的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 …

我想以下列方式配置React Router.如果匹配某个路由,则将用户重定向到另一个路由.文档说明它是可能的,但没有提供实现这一目标的确切方法.有没有人对此有所了解？

type EnterHook = (nextState: RouterState, replaceState: RedirectFunction, callback?: Function) => any;

type RedirectFunction = (state: ?LocationState, pathname: Pathname | Path, query: ?Query) => void;

能否帮助我理解我可以使用最新版本的反应路由器(v1.1.0)的重定向机制.我想重定向到一个url取决于用户登录的成功或失败.我试图做以下事情首先使用创建历史记录.

let history = createBrowserHistory();

然后尝试用推动状态

history.pushState(null, 'abc')

什么都没发生.你能不能让我知道正确的转换方式.从我理解的文档transitionTo()中,最新版本中没有API.如果你能指出一个简单的工作实例,它会很棒.

提前致谢.

我正在尝试使用查询字符串设置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'}) …