reactjs 在react router版本4中未进行路由

0qx6xfy6 于 2023-10-17 发布在 React

关注(0)|答案(2)|浏览(108)

这次我可能犯了个愚蠢的错误，但我明白了。我开始使用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，但在控制台也没有任何错误

reactjs

来源：https://stackoverflow.com/questions/45454786/routing-not-happening-in-react-router-version-4

2条答案

按热度按时间

vc9ivgsu1#

不要在浏览器路由器中使用交换机：

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

赞(0）回复(0）举报 2023-10-17

tjjdgumg2#

你的回答似乎还可以。但我通常是这样做的：

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>

赞(0）回复(0）举报 2023-10-17

我来回答

reactjs 在react router版本4中未进行路由

2条答案

相关问题

热门标签

最新问答