React 路由器版本 4 中未发生路由

Question

这次我可能犯了愚蠢的错误，但我只是明白了。我从 React router v4 开始，但我的路由没有发生。我尝试手动点击网址以及通过按钮点击没有结果。这是我的路线配置。仅供参考，我正在使用 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这样的url，但在控制台中也没有呈现任何错误

Answer 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')
);

Answer 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>