标签: react-router-dom

我正在寻找一种方法使 NavLink 的“to”属性动态反应。

let url = 'localhost'=='localhost'? 'foo':'';
<Router>
 <NavLink to={url+'/'}>Home</NavLink>
</Router>

可以工作，但对于每个新的渲染反应，它都会向现有的渲染添加一个新的 url。 http://localhost/foo 渲染后 http://localhost/foo/foo ...

谢谢

我是 React 和 React-router-dom 的新手。我已经花了几个小时了，但我却陷入了死胡同。

我正在使用 create-react-app 和 bulma 作为 css。我的依赖项：

"dependencies": {
  "bulma": "^0.7.1",
  "font-awesome": "^4.7.0",
  "node-sass-chokidar": "^1.3.3",
  "react": "^16.5.2",
  "react-bulma-components": "^2.1.0",
  "react-dom": "^16.5.2",
  "react-fontawesome": "^1.6.1",
  "react-router-dom": "4.3.1",
  "react-scripts": "2.0.4"

},

我查看了 stackoverflow、create-react-app 文档上的所有相关问题，并在其存储库中搜索了他们的开放问题部分，用谷歌搜索了每个可能的关键字。我不知所措。

我的路由器只会渲染一条路线（Homeroute）。

我如何让它也显示“/create”路线？

我试过了：

• “精确”和“严格”属性的组合
• 用 <div> 包裹 <BrowserRouter> 或 <HashRouter> 之后的所有内容
• 尝试使用 <Switch> 来（取消）包装 <Route>

• 尝试了 BrowserRouter 和 HashRouter

  import React, { Component } from "react";
  import { Switch, Route, NavLink, BrowserRouter, HashRouter } from "react-router-dom";
  
  const Home = () => {
      return (<h2>This is …

  Run Code Online (Sandbox Code Playgroud)

我正在开发一个带有补丁说明的应用程序，其中的 url 具有使用 React Router 定义的以下结构：

<Route path='/updates/:id?' render={(params) => <Updates {...params} />}></Route>

如果 url 包含这样的哈希部分，我希望允许用户转到文档的特定部分/updates/1#index。在这里， url 部分应该像普通 HTML 一样#index将用户发送到 div 。id='index'

我读到了有关普通 HTML 的 hashRouter 的信息，{content}但它没有按我的预期或要求工作：

<HashRouter>
  {content}
</HashRouter>

我怎样才能实现这个目标？

我正在将 AngularJS 应用程序一点一点地迁移到 React，我希望有一个自定义的RouterLinkReact 组件来检查是否react-router在上下文中，以便它可以使用history，如果不是，则回退到使用旧的window.location. react-router但我在的文档中没有看到任何检查这一点的方法。

我尝试使用withRouter，但它在不在上下文中时抛出，并且ErrorBoundary似乎没有捕获错误。

有谁知道我该怎么做？

我正在使用react-router-dom v6，不知道如何获取参数值

前任：http://localhost:3000/user/:id

我想要得到:id

有人使用钩子useParams来获取，但我正在使用类，所以我不能使用钩子。

我有两页reactjs

pageOne.js：

import React from "react";
import { Link } from "react-router-dom";
import "./pageOne.css";
const PageOne = () => {
  return (
    <div>
      one
      <br />
      <Link to="/pageTwo">Two Page</Link>
    </div>
  );
};
export default PageOne;

pageTwo.js：

import React from "react";
import { Link } from "react-router-dom";
import "./pageTwo.css";
const PageTwo = () => {
  return (
    <div>
      two
      <br />
      <Link to="/">One Page</Link>
    </div>
  );
};
export default PageTwo;

我定义了两个 css 文件，用于在页面加载时更改背景颜色。

pageOne.css

body {
  background-color: whitesmoke !important;
} …

我对反应有点陌生，我面临着路由器的问题。当我直接在浏览器上输入 URL 时，路由有效，但是当我单击链接时，浏览器上的 URL 会发生变化（例如 http://localhost:8080/contactus），但内容不会更新（但是如果我刷新，它就会更新）。

这是我的 github 存储库： https ://github.com/Arefaat18/Project

这是我的 MainComponent.js

import React, { Component } from 'react';
import {TransitionGroup, CSSTransition} from 'react-transition-group';
import {Switch, Route, Redirect,withRouter,BrowserRouter as Router} from 'react-router-dom';
import Header from './HeaderComponent';
import ContactUs from './ContactUsComponent';
import AboutUs from './AboutUsComponent';
import Home from './HomeComponent.js';
import {connect} from 'react-redux';  

class Main extends Component {

  constructor(props) {
    super(props);

  }

  
  
  render() {

    return (
      <div>
        <Router>
        <Header />
        <TransitionGroup>
          <CSSTransition classNames="page" timeout={300}>
            <Switch>
              <Route path="/home" component={Home} />
              <Route …

我有带有 的侧边栏组件Links，并且我需要Link在打开特定 URL 时更改颜色。

React 中最好的解决方案是什么？

我有一个带有几条路线的 create-react-app 。当我时不时地改变分支等时，我注意到路由不起作用。我认为它唯一一次起作用是因为缓存。

下面是我的路线，为了简单起见，我blog用一个简单的p标签替换了路线，因为我开始认为它与我链接的组件有关。

应用程序.tsx

const history = createBrowserHistory();
...
<Router history={history} data-test="component-app">
   <Switch>
      <Route exact path="/" component={Main} />
      <Route path="/blog">
         <p>test</p>
      </Route>
   </Switch
</Router>

主.tsx

import React from "react";
import { Link } from "react-router-dom";

export const Main = () => {

    return (
        <Link to="/blog">Blog</Link>
    )
}

发生的情况如下：

• 单击 Main = 中的 Blog 链接，浏览器中的路由更改为 localhost:9600/blog 但没有内容，只有一个白色页面
• 在 localhost:9600/blog 上刷新页面，您将获得该<p>test</p>部分

但为什么点击链接后不立即显示测试呢？

我正在使用的版本：

• 反应路由器-dom：“^ 5.2.0”
• 反应脚本：“4.0.1”
• 反应：“^17.0.1”
• 历史记录：“^5.0.0”

有任何想法吗？

在下面的代码中：

如果从ClientSide发送的用户身份验证数据与后端匹配，则后端发送带有用户id的响应，在前面设置，然后组件发送第一种情况，客户端可以访问任何受保护的组件。否则，设置然后组件发送第二种情况，其中仅包含和路由.认证方式安全吗？setIsAuthtrueLayout<Switch>setIsAuthfalseLayout<Switch><Signup /><Login />

  let [isAuth, setIsAuth]=useState( false )

  return (
    <>
      {
       isAuth ? <Switch>
        <Route exact path={"/"} component={ Home } />

        <Route exact path={"/shopping-card"} component={ShoppingCard} />
        <Route exact path={"/order-success"} component={ OrderSuccess } />
        <Route exact path={"/orders"} component={ Orders } />
        <Route exact path={"/products"} component={ Products } />

        <Redirect to={"/user/login"} />
      </Switch> : <Switch>
        <Route exact path={"/user/signup"} component={ Signup } /> …