标签: react-router-v4

我想在客户端上使用React,在REST服务器上使用Java Spring Boot,客户端和服务器都打包在一起,因此它们托管在同一个应用服务器上.

我已经可以通过/api路径查询服务器API .

但是,(如何)我可以使用BrowserRouter的react-router-dom客户端,而不是在(路由器V4) HashRouter？

我不太了解Spring Boot,但我想我可以在服务器上查看路由是否匹配/api,然后我会返回index.html带有基于HTTP查询位置路径处理路由的所有反应逻辑？

我希望我很清楚,我不希望URL中的哈希值和路由必须在客户端上完成.

有一些关于 SO 的主题，比如这个建议更改 Webpack，而这个建议设置一个包罗万象的。

我正在使用react-router-dom三个路线；类似的故事，对这里剩余的问题，在/道路工程，但没有/cars或/about不会。

import React, {Component} from 'react';
import {render} from 'react-dom';
import {BrowserRouter, Route, Switch, Link} from 'react-router-dom';


const Home = () => (
  <h1>Home</h1>
)

const Car = () => (
  <h1>Cars</h1>
)

const About = () => (
  <h1>About</h1>
)

render(
  <BrowserRouter>
    <Switch>
      <Route exact path="/" component={Home}/>
      <Route exact path="/cars" component={Car}/>
      <Route path="/about" component={About}/>
    </Switch>
  </BrowserRouter>,
  document.getElementById('container')
);

我试过在我的 webpack 配置中添加一个 …

我正在尝试制作一个完全受登录页面保护的网站。用户登录后，他们将被重定向到主页面，该页面具有完全不同的布局。

MainLayout （包括标题、侧边栏等）

LoginLayout （将页面上的所有内容居中，但不包括上述元素）

FutureLayout （我希望以后能够对不同的页面使用不同的布局）

目前，我面临的最大问题是每次更改路线时，一切都会重新渲染。我有点理解为什么会发生这种情况，但我一直无法找到解决方法。

这是我目前的一些进展

第一个想法

https://codesandbox.io/s/6l10v4o7jn

const HomePage = () => (
  <MainLayout>
    <h1>HOME PAGE</h1>
  </MainLayout>
);

这显然是因为每次你移动到另一个页面，在不工作Page重新呈现Layout。您可以通过green在任一HomePage或AboutPage然后切换路线上切换按钮来查看此操作

第二个想法

https://codesandbox.io/s/moj437no58

  <Route render={() => (
      <MainLayout>
        <Route exact path="/" component={HomePage} />
        <Route path="/about" component={AboutPage} />
      </MainLayout>
  )} />
  <Route render={() => (
    <LoginLayout>
      <Route path="/login" component={LoginPage} />
    </LoginLayout>
  )} />

这解决了状态问题，但当然它同时呈现两种布局，因为有注意告诉它不要，但正如预期的那样，页面仍然由路由器确定。

在实际应用中，这些线路将被抽取到像自己的分量<AuthRoutes>和<PublicRoutes>

为什么某些解决方案可能不起作用

我还计划使用connectedRouterRedirect来自redux-auth-wrapper来处理保护我的路由，这在使用我发现的一些建议时可能会出现问题。

我相信这是因为包装器如何作为 HOC 与Route …

我正在 React 上开发一个通用搜索组件，它将过滤器、当前页面和一些其他参数放在 URL 查询字符串上（在 后面?）。

我目前使用URLSearchParams将查询字符串转换为 js 对象，然后返回查询字符串，如react-router-v4预期的那样

关键是我需要在查询字符串中存储一个对象，这样我就可以将搜索过滤器（可以有多个字段）与其他参数区分开来。

我发现我可以将对象转换为 JSON?filter.name=foo&filter.tag=bar ，并将所有内容存储在过滤器参数中，或者我可以使用点符号 ( ) 甚至方括号符号 ( )存储对象?filter[name]=foo&filter[tag]=bar，并在从 url 读取它们时相应地处理它们。

我倾向于选择 JSON 表示法，但是这种方法有什么问题吗？我应该事先知道任何限制吗？有更好的方法吗？

我的导航栏中页面之间的导航是使用 onClick 处理程序完成的，而不是通过 hrefs。执行此操作时，我无法通过中键单击在新选项卡中打开或右键单击链接并选择在新选项卡中打开。我正在使用 react-router-v4。

路线的一个例子。

<a onClick={() => this.props.history.push('/conference/')}>Conference</a>

有没有办法让这种情况发生在反应中，还是我应该使用 hrefs？

当导航到路由的动作被触发时，动作会触发一个新状态，其中router.location.pathname根据浏览器的history.

另一个属性也发生了变化：router.location.key, 到一个新的随机字符串。

即使路径名本身没有改变（从页面本身点击一个页面的链接），它key仍然会更新。

key物业的目的是什么？在哪些情况下，我希望我自己的状态随机生成key，哪些更新会在非常动作分派时进行？为什么它不是一个简单递增的数字？

如果我单击导航链接，我可以看到 slug 已更改但组件未呈现。我必须手动刷新页面才能看到组件，而页面应该在路由/slug 更改时自行重新呈现。

应用程序.js

import React, { Component } from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import Me from './components/me';
import Contrib from './components/contrib';
import Projects from './components/projects';
import Contact from './components/contact';

class App extends Component {
  render() {
    return (
      <div className="container">
        <BrowserRouter>
          <Switch>
            <Route exact path="/" component={Me} />
            <Route path="/contrib" component={Contrib} />
            <Route path="/projects" component={Projects} />
            <Route path="/contact" component={Contact} />
          </Switch>
        </BrowserRouter>
      </div>
    );
  }
}

头文件.jsx

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

const …

我是新来的反应和仍在学习我的方式。我正在创建一个单页应用程序，如果用户未登录，用户将被重定向到登录页面。 React 有一个重定向组件，我不知道如何使用它。

以下是我的 app.js :-

import React, { Component } from 'react';
import { Route, Switch, Redirect } from 'react-router-dom';
import Login from './components/login/login.js'
import Protected from './components/protected/protected.js'

import './App.css';

class App extends Component {

  state = {
    loggedIn: false // user is not logged in
  };

  render() {

    return (
        <Switch>
          <Route path="/protected" component={Protected}/>
          <Route path="/login" component={Login}/>
        </Switch>
    );
  }
}

export default App;

在上面的场景中，/login如果状态loggedIn为假，我希望用户被重定向到页面，否则它应该转到/protected页面。

我目前正在尝试找到一种方法来显示自定义组件（如 Modal）以使用该Prompt组件确认路由更改。

Promp组件的默认行为是显示带有消息的确认对话框，如您在此示例中所见：React Router：防止转换。

注意：我正在使用该<BrowserRouter>组件。

路由器有一个propnamed getUserConfirmation，您可以使用它来自定义<Prompt>组件的行为。

// this is the default behavior

function getConfirmation(message, callback) {
  const allowTransition = window.confirm(message);
  callback(allowTransition);
}

<BrowserRouter getUserConfirmation={getConfirmation} />;

我正在尝试做的事情：

• 父组件APP内部
  • 我将confirm状态设置为 true，以显示<Confirm>组件
  • 我正在尝试callback将getConfirmation函数从函数传递给<Confirm>组件以调用它true以允许转换，并false阻止它。
  • true or false如上所示，将在默认行为中调用回调。

function getConfirmation(message, callback) {
    console.log("Inside getConfirmation function...");
    setConfirmCallback(callback);
    setConfirm(true);
    // const allowTransition = window.confirm(message);
    // callback(allowTransition);
  }

这是 …

我制作了一个组件并将其用作...

<TopNav
    loggedIn={global.shared.loggedIn} // false 
    fullName={global.shared.fullName} // ''
    avatar={global.shared.avatarId} // ''
/>

在 TopNav 组件中，我希望能够访问我传入的道具和/props.history或以编程方式导航用户的其他方式而无需刷新..

import React from 'react';
import { RouteComponentProps } from 'react-router-dom';


interface PropsInterfaceNew {
  avatar: string;
  loggedIn: boolean;
  fullName: string;
}

interface PropsInterface
  extends RouteComponentProps<PropsInterfaceNew> {}
//                                    ^ Error

const TopNav: React.FC<PropsInterface> = (props: PropsInterface) => {
...
 const firstName = props.fullName.split(' ')[0]; // I need props.fullName & others
  const search = (event: React.FormEvent) => {
    event.preventDefault();
    props.history.push('/my/profile'); // I need props.history
  };

错误是 …