在反应路由器版本 4 中没有发生路由答案

【问题标题】：routing not happening in react router version 4在反应路由器版本 4 中没有发生路由
【发布时间】：2018-01-09 07:43:36
【问题描述】：

这次我可能犯了愚蠢的错误，但我只是明白了。我从反应路由器 v4 开始，但我的路由没有发生。我尝试手动点击 url 以及通过按钮点击没有结果。这是我的路线配置。仅供参考，我正在使用 LinkContaier 进行重定向

import ReactDOM from 'react-dom';
import React from 'react';
import { Provider } from 'react-redux';
import configureStore from './stores/configureStores';
import {BrowserRouter,Route,Switch} from 'react-router-dom'
import HeaderContainer from "./containers/HeaderContainer"
import ProgramProfileContainer from "./containers/ProgramProfileContainer"
const store = configureStore();


ReactDOM.render(
  <Provider store={store}>
     <BrowserRouter >
      <Switch>
        <HeaderContainer/>
        {/* <Route exact path="/" component={HeaderContainer}/> */}
          <Route path="program-profile/:program_id" component={ProgramProfileContainer}/>   
      </Switch>
    </BrowserRouter>
  </Provider>, document.getElementById('root')
);

这是我的容器

import React from "react"
import { connect } from 'react-redux';

export default class ProgramProfileContainer extends React.Component{

    render(){
        console.log("program profile")
        return(
            <h1> this is profile </h1>
        )
    }
}

我点击了类似 program-profile/3 的网址，但在控制台中也没有显示任何错误

【问题讨论】：

尝试添加正斜杠path="/program-profile/:program_id"，如果在 webpack 中设置了 devServer historyAPIFallback: true，它应该可以在按钮单击和手动上工作
我正在使用反应脚本，所以它有内置的配置和这个功能..:(
删除<Switch>
我在使用 LinkContainer 有什么不同吗？
@Fawaz：路由器只能有一个子元素

标签： reactjs react-redux react-router-v4 react-router-dom

【解决方案1】：

不要在浏览器路由器中使用开关：

ReactDOM.render(
   <Provider store={store}>
      <BrowserRouter >
        <div>
           <Route exact path="/" component={HeaderContainer}/>
           <Route path="/program-profile/:program_id" component={ProgramProfileContainer}/>   
       </div>
     </BrowserRouter>
 </Provider>, document.getElementById('root')
);

【讨论】：

为什么不建议使用开关组件
交换机也是路由器。您应该根据要求仅使用一台路由器。参考这里reacttraining.com/react-router/web/guides/philosophy

【解决方案2】：

您的回答似乎还可以。但这是我通常的做法。

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import promise from 'redux-promise';

import reducers from './reducers';
import ProgramProfileContainer from "./containers/ProgramProfileContainer"

const store = configureStore();

ReactDOM.render(
  <Provider store={store}>
    <BrowserRouter>
      <div>
        <Switch>
            <Route path="program-profile/:program_id" component={ProgramProfileContainer} />
            <Route path="/" component={IndexPage} />
        </Switch>
      </div>
    </BrowserRouter>
  </Provider>
  , document.querySelector('.container'));

当你使用Link时应该是这样的。

<Link to={`/posts/${post.id}`}>
  {post.title}
</Link>

如果您在控制台中有任何错误消息，请发布它们，以便我们进一步帮助您。希望这可以帮助。编码愉快。

【讨论】：