Question

我有这条路线：

const AppRouter = () => (
    <Router history={history}>
    <div>
        <Switch>
            <Route path='/' component={LoginPage} exact={true} />
        </Switch>
    </div>
    </Router>
);

它仅在我将 Route path 设置为空字符串 '' 时有效但是，记录 history.location.pathname 显示 / 它运行在 localhost:3000

我注意到这个有效：

<Route path=':3000/' component={LoginPage} exact={false} />

Answer 1

您也不必在浏览器窗口中的“localhost:3000”之后包含“/”。

import React from 'react'  
import { BrowserRouter, Route, Switch } from "react-router-dom";
import ComponentName from './ComponentName';

const Router = () => {
<BrowserRouter>   
 <Switch>
          <Route exact path="/" component={ComponentName}/>
   </Switch>
</BrowserRouter>
}
export default Router;

然后将路由器组件导入到 App.js。

import Router from './Router';
function App() {
  return <Router /> 
} 
export default App;

Answer 2

我不知道，你的代码库实际上在做什么，但据我所知，它应该可以工作。如果不是，那么你可能做错了。

首先，你应该使用react-router-dom，而不是react-router

那么对于 React 应用来说，路由组件看起来像这样

import React from 'react'
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

const AppRouter = () => (
    <Router>
    <div>
        <Switch>
            <Route path='/' component={LoginPage} exact={true} />
        </Switch>
    </div>
    </Router>
);

这应该可以正常工作。如果不是，请告诉我

反应路由器：路径='/'的路由不起作用

2 个答案: