React-router 在有效路由上不匹配答案

【问题标题】：React-router not matching on valid routeReact-router 在有效路由上不匹配
【发布时间】：2016-10-20 11:07:03
【问题描述】：

无论我做什么，我都无法让这个反应路由器匹配路径的第二部分。

Express 服务器正在为任何 URL 匹配返回 index.html（我在任何 URL 上都没有收到 GET 错误，所以我认为这很好）

app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});

这是我尝试过的一些路由示例，根据反应路由器docs，它们应该是有效规则

示例 1）

<Route path="test">
  <IndexRoute component={Home} />
  <Route path="/login" component={Login} />
</Route>

或

<Route path="test">
    <IndexRoute component={Home} />
    <Route path="/login" component={Login} />
</Route>

http://localhost:3100/test = 成功 > 返回主组件 http://localhost:3100/test/login = 失败 > 给我空白屏幕

示例 2）

 <Route path="/login" component={Login} />

http://localhost:3100/login = Success > 返回登录组件

示例 3)

 <Route path="/test/login" component={Login} />

或

 <Route path="test/login" component={Login} />

http://localhost:3100/test/login = 失败 > 给我空白屏幕

我使用的是 2.5 版，非常感谢任何帮助！

** react 路由器的 Yarn dump **

react-router@^2.5.0:
  version "2.8.1"
  resolved "https://registry.yarnpkg.com/react-router/-/react-router-2.8.1.tgz#73e9491f6ceb316d0f779829081863e378ee4ed7"
  dependencies:
    history "^2.1.2"
    hoist-non-react-statics "^1.2.0"
    invariant "^2.2.1"
    loose-envify "^1.2.0"
    warning "^3.0.0"

【问题讨论】：

你试过<Route path="/login" component={Home} />吗？
您是否尝试过从“/login”中删除斜线？我认为您可以通过这种方式指定绝对路径，所以http://localhost:3100/login 应该适用于第一个示例？
对于您的第二个示例，将其更改为
@DamienLeroux 我需要 2 条路径才能工作，测试只是一个示例，它可能只是登录，但我需要 /example/login 才能工作。 Mazzu 和 pavel 我都试过了，它们使用 1 条路径但不是 2 条：/
更新了我的例子

标签： javascript reactjs react-router

【解决方案1】：

尝试 path="login" 而不是 path="/login" 。嵌套路由中不需要路径前的斜杠。

<Route path="test/">
  <IndexRoute component={Home} />
  <Route path="login" component={Login} />
</Route>

【讨论】：

我已经尝试了所有斜线组合，无论我在登录前包含还是排除斜线，都没有任何效果。如果我使用这个localhost:3100/test 不加载主页，localhost:3100/test/login 也不起作用。在原代码中localhost:3100/test确实加载了home，但是第二条路径不起作用

【解决方案2】：

从express documentation，app.get('/*' 使用正则表达式。所以，'/*' 为 0 到 n '/' 工作。试试：

app.get('/.*

/.* 应该将 '/' + 0 解析为 n 个字符。

问候

【讨论】：

【解决方案3】：

我认为问题更多在于您渲染应用程序的方式而不是 react-router 本身，因为您没有收到路由未找到消息而是空白屏幕，我建议如下。

当您创建历史对象时，请执行以下操作

import { useRouterHistory } from 'react-router';
import createBrowserHistory from 'history/lib/createBrowserHistory';

// ========================================================
// Browser History Setup
// ========================================================
const createHistory = (basename) => {
  return useRouterHistory(createBrowserHistory)({
    basename: basename
  })
}

const history = createHistory('/test');

您的路线配置将如下所示

<Route path="/" component={App} >
  <IndexRoute component={Home} />
  <Route path="login" component={Login} />
</Route>

您的 App 组件将如下所示

export const App extends Component = {
 render() {
   return(
    <div class='app-container'>
     {this.props.children}
    </div>
   )
 }
}

App.propTypes = {
 children: PropTypes.element.isRequired
}

export default App;

然后您将能够访问和呈现组件 Login @ /test/login

【讨论】：