React-router v4 一次显示多个路由 [英] React-router v4 showing multiple routes at once

问题描述

我遇到一个问题，我使用 react-router-dom 的路由一次显示所有路由.所以当我渲染我的 App 组件和包含路由的开始时，我看到每个路由的页面彼此重叠.所以它看起来像这样:

开始这一切是如何开始的，这是我的 index.jsx，它在页面上呈现 App 组件:

//依赖从反应"导入反应；从 'react-dom' 导入 ReactDOM；//组件从'./components/app.jsx'导入应用程序；//样式导入'./index.scss';const container = document.getElementById('main');ReactDOM.render(, 容器);

在我的应用组件中，路由是这样设置的:

//依赖从反应"导入反应；import { BrowserRouter as Router, Route, Match, Miss } from 'react-router-dom';//组件从'./pages/login/login.jsx'导入登录；从'./pages/home/home.jsx'导入首页；//样式导入'./app.scss';const App = () =>{返回 (<路由器><div><路由精确模式='/' component={Login}/><路由精确模式='/home' component={Home}/>

</路由器>);};导出默认应用程序；

这是我的登录/主页组件(主页组件与替换登录完全相同):

//依赖从反应"导入反应；//样式导入'./login.scss';class Login 扩展了 React.Component {使成为() {返回 (<div className="内容">
登录页面

);}}导出默认登录；

我还注意到，当我导航到 http://localhost:9999/home 时，我也收到此错误:

有些东西显然接线不正确，我对现有不同版本的文档感到有些困惑.非常感谢有关如何解决此问题的建议！

解决方案

来自 反应训练 :

<块引用>

没有路径的路由总是匹配的.

因此，在您的情况下，两者将始终匹配，因为您使用的是模式.

I am having an issue where my routing using react-router-dom is showing all routes at once. So when I render my App component and the start that contains the Routing, I am seeing the pages for each route on top of each other. So it looks like this:

Sooo to begin how this is all kicking off, this is my index.jsx that is rendering the App component on the page:

// Dependencies
import React from 'react';
import ReactDOM from 'react-dom';

// Components
import App from './components/app.jsx';

// Styles
import './index.scss';

const container = document.getElementById('main');

ReactDOM.render(<App />, container);

In my App Component, the routing is set up as so:

// Dependencies
import React from 'react';
import { BrowserRouter as Router, Route, Match, Miss } from 'react-router-dom';

// Components
import Login from './pages/login/login.jsx';
import Home from './pages/home/home.jsx';

// Styles
import './app.scss';

const App = () => {
  return (
    <Router>
      <div>
          <Route exact pattern='/' component={Login}/>
          <Route exact pattern='/home' component={Home}/>
      </div>
    </Router>
  );
};

export default App;

This is my Login/Home component (The Home component is the exact same just replacing Login):

// Dependencies
import React from 'react';

// Styles
import './login.scss';

class Login extends React.Component {
  render() {
    return (
      <div className="content">
        <div className='title'>
            Login Page
        </div>
      </div>
    );
  }
}

export default Login;

I also noticed that when I navigate to http://localhost:9999/home I am getting this error also:

Something is apparently wired incorrectly, and I am a little confused by the documentation with the different versions existing. And advice on how to get this fixed is greatly appreciated!

解决方案

From the React Training :

Routes without a path always match.

So in your case both will always match because u are using pattern.

这篇关于React-router v4 一次显示多个路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！