命名路径在 react-router-dom react js 中不起作用

Posted 2023-02-22

【中文标题】命名路径在 react-router-dom react js 中不起作用

【英文标题】：named path not working in react-router-dom react js

【发布时间】：2018-04-05 02:57:39

【问题描述】：

我使用react-router-dom 进行路由。这是我的代码：

//Libraries
import React from 'react';
import  Tabs, Tab  from 'react-tabify';
import  connect  from 'react-redux';
import 
  BrowserRouter as Router,
  Route,
  withRouter
 from 'react-router-dom';

//Components
import HomePage from './containers/HomePage';
import PersonsPage from './containers/PersonsPage';

const App = () => (
  <Router>
    <div style=height: '100%', width: '100%'>
      <Route exact path="/" component=HomePage/>
      <Route exact path="/:id" component=PersonsPage/>

      // here i want to use like this --> <Route exact path="/personPage/:id" component=PersonsPage/>


    </div>
  </Router>
)
export default withRouter(connect()(App));

Route exact path="/:id" component=PersonsPage/> 这个工作，但是这个Route exact path="/personPage/:id" component=PersonsPage/> 这个对我不起作用。有人可以澄清/帮助我吗？

【问题讨论】：

如果你有像/12 这样的链接组件路径，它可能不起作用。你能显示你是如何路由的吗

我没有使用 Link ，而是手动从我的应用程序 url 传递数据（出于某些原因）。

你的路线顺序是什么？您是否尝试将path="/personPage/:id" 的路线放在path="/:id" 的路线之前？

我认为这里不需要订购。我想知道如何使用名称而不是那个空路由。例如：而不是这个 ，我想要 这个

因为我只有 2 个路由，1. 默认主页 ("/") 和 2. 个人页面 (/personpage:id)

【参考方案1】：

我认为您应该简单地将路由器包装在 Switch 组件中。但请记住将<Route exact path="/:id" component=PersonsPage/> 作为最后一个条目。

这里有一个文件中的示例：

import React,  Component  from 'react';
import  render  from 'react-dom';
import 
  BrowserRouter as Router,
  Route,
  Switch,
  Link,
  withRouter
 from 'react-router-dom';

const HomePage = () => (
  <div>
    <h1>HomePage</h1>
    <ul>
      <li><Link to="/user/Tom">Tom</Link></li>
      <li><Link to="/user/John">John</Link></li>
      <li><Link to="/user/Andy">Andy</Link></li>
    </ul>
  </div>
);

const PersonsPage = (props) => (
  <div>
    <h1>Profile: props.match.params.name</h1>
  </div>
);

class App extends Component 
  render() 
    return (
      <Switch>
        <Route exact path="/" component=HomePage/>
        <Route exact path="/user/:name" component=PersonsPage/>
      </Switch>
    );
  


const AppWithRouter = withRouter(App);

render(
  <Router>
    <AppWithRouter />
  </Router>
  , document.getElementById('root')
);

这里有工作版本的链接https://stackblitz.com/edit/react-qqpraz

【讨论】：

@Beckham_Vinoth - 我编辑了我的答案。请立即检查。

tnx 为你的努力付出了很多兄弟 :) ，但我需要这样 -->

路径应该有一些名字 --> /someName/:parameterData

我在 url 中添加了前缀“/user/”，它也可以工作。请查看stackblitz.com/edit/react-qqpraz

在 stackblitz 中运行良好。让我在我的代码中实现它并在这里更新你:)