0

我是 React 新手，目前正在开发导航栏。我有 index.js 这是我的启动文件

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom';
import history from 'history';
import Routes from './routes/index';
import Template from './containers/Template';

ReactDOM.render( 
  (
    <BrowserRouter 
        history={history}
        routes={Routes}
    >
        <Template />
    </BrowserRouter>
  ),document.getElementById('root')
);

路由是从如下所示的 routes/index.js 文件中导入的

import React from 'react';
import {Route, BrowserRouter, Switch} from 'react-router-dom';
import Template from '../containers/Template';
import Home from '../containers/Home';
import Profile from '../containers/Profile';

const createRoutes = () => {
  return (
      <BrowserRouter>
      <Switch>
        <Route path= '/' component= {Template}/>
        <Route path= '/' component={Home}/>
        <Route path= {'/profile'} component={Profile}/>  
      </Switch>
      </BrowserRouter>
  )
}


const Routes = createRoutes();

export default Routes;

我的主要问题是，当我使用 chrome 和 React Developer 工具时，我可以看到与 BrowserRouter 对象相关的路由，如下所示 浏览器元素检查中的路由

但是我无法打开任何指定的路由，总是得到“无法获取 /profile”，请注意我使用 webpack 作为 web 开发包。

4

1 回答 1

0

这里发生的是您的 webpack-dev-server 试图为您提供一个名为的 html 页面，该页面/profile在您使用单页应用程序时不存在。

看看这个链接，但归根结底，这是 webpack-dev-server 的预期行为，因为/profilehtml 页面不存在。

为了让这种行为起作用，您需要实现服务器端渲染，或者您可以使用 React-Router 的哈希位置

于 2017-06-06T17:24:06.723 回答