Reactjs 不知道如何路由到我在Laravel中的React视图

我正试图通过Laravel路由到我的react viewName.js文件，但我不太确定如何完成。我将通过侧边栏进行路由，以从一个视图更改为另一个视图，但我不确定如何在React中设置路由路径

我的app.js

import React, { Component }from 'react';
import ReactDOM from 'react-dom';

// Layouts
import Header from '../components/layouts/Header';
import Sidebar from '../components/layouts/Sidebar';

// Views
import Repos from '../components/views/Repos';
import Hooks from '../components/views/Hooks';
import Issues from '../components/views/Issues';
import Members from '../components/views/Member';

class Index extends Component {
    render() {
    return (
        <div className="container">
            <Header />
            <Sidebar /> 
            <Repos />
            <Hooks />
            <Issues />
            <Member />
        </div>
        );
    }
}

export default Index;

if (document.getElementById('index')) {
    ReactDOM.render(<Index />, document.getElementById('index'));
}

边栏

import React, {Component} from 'react'
import List from '@material-ui/core/List'
import ListItem from '@material-ui/core/ListItem'
import ListItemText from '@material-ui/core/ListItemText'
import { Link } from 'react-router-dom';

class Sidebar extends Component {

  render() {
    return (
      <List disablePadding dense style={styleSidebar}>
        <ListItem button>
          <ListItemText style={textStyle}>Repos</ListItemText>
        </ListItem>
        <ListItem button>
          <ListItemText style={textStyle}>Events</ListItemText>
        </ListItem>
        <ListItem button>
          <ListItemText style={textStyle}>Hooks</ListItemText>
        </ListItem>
        <ListItem button>
          <ListItemText style={textStyle}>Issues</ListItemText>
        </ListItem>
        <ListItem button>
          <ListItemText style={textStyle}>Members</ListItemText>
        </ListItem>
      </List>
    )
  }
} 

import React，{Component}来自“React”
从“@material ui/core/List”导入列表
从“@material ui/core/ListItem”导入ListItem
从“@material ui/core/ListItemText”导入ListItemText
从'react router dom'导入{Link}；
类边栏扩展组件{
render（）{
返回(
回购协议
事件
钩子
问题
成员
)
}
} 

试试这个原则

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
<Router> 
   <Link to="/Repos" >Repos</Link>
   <Link to="/Events" >Events</Link>
    {<Route  exact path="/Repos" component={Repos} />}
    {<Route  exact path="/Events" component={Events} />}
</Router> 

从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
回购协议
事件
{}
{}

使用我上面那个家伙写的路由器组件，索引渲染应该是这样的

你可以在这里看到我的索引文件

---

为您的客户添加更多详细信息question@krimo我添加了更多的细节sidbar在react js中？@krimo是的。我继续添加了边栏代码愚蠢的问题，我想你是想在我的app.js中尝试这个吗？你的意思是@DevJput它在边栏组件中，然后根据需要更改样式@DevJIt不幸抛出了一个错误“app.js:83461 Uncaught ReferenceError:Events is not defined”（例如）在组件中，将每个页面的组件放入@DevJ

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
<Router> 
   <Link to="/Repos" >Repos</Link>
   <Link to="/Events" >Events</Link>
    {<Route  exact path="/Repos" component={Repos} />}
    {<Route  exact path="/Events" component={Events} />}
</Router>