Javascript React路由器V4工作不正常_Javascript_Reactjs

Javascript React路由器V4工作不正常

javascript reactjs

Javascript React路由器V4工作不正常,javascript,reactjs,Javascript,Reactjs,我正在制作一个web应用程序，其中我希望在同一页面上使用路由器单击用户时显示其详细信息。这是我的index.js页面 window.React = React; render(<div> <Menu/><MainMenu/><App/><Footer/> </div>, document.getElementById('react-container')) window.React=React；渲染( 主页

我正在制作一个web应用程序，其中我希望在同一页面上使用路由器单击用户时显示其详细信息。这是我的index.js页面

window.React = React;

render(<div>
    <Menu/><MainMenu/><App/><Footer/>
</div>, document.getElementById('react-container'))

window.React=React；
渲染(
主页
帖子
用户
哎呀，404

最后这是我的table.js页面

export default class MyTable extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            currentPage: this.props.pgNo,
           details : [],
    id: null
        }
        this.MaxPages = 0;

    }

    PrevButton() {

        if (this.state.currentPage === 0) {
            return (null);
        } else {
            return (
                <button
                    type="button"
                    key={this.state.currentPage}
                    style={{
                    float: "left"
                }}
                    onClick=
                    { () => { this.setState({ currentPage: this.state.currentPage - 1 }) } }>
                    Previous Page
                </button>
            );
        }

    }

    NextButton() {
        if (this.state.currentPage === this.MaxPages - 1) {
            return (null);
        } else {
            return (

                <button
                    style={{
                    float: "right"
                }}
                    key={this.props.pgNo}
                    onClick={() => {
                    this.setState({
                        currentPage: this.state.currentPage + 1
                    })
                }}>
                    Next Page
                </button >
            );
        }
    }


    createTable = () => {

        let tableHeader = <thead>
            <tr>
                {this.props.columns.map(column => {
                        return <th key={column.name}>
                            {column.name}
                        </th>
                    })}
            </tr>

        </thead>;
        this.state.number = this.state.number + 1;
        let tableRows = [];
        for (let i = this.state.currentPage * this.props.maxItems; (i < (this.state.currentPage + 1) * this.props.maxItems) && (i <= this.props.data.length); i++) {

            this.state.id= i + 1;          

         let row = <Link to={{
            pathname: `/user-lists/details(/${i+1})`

          }}>

          <tr key={i}>
                {this
                    .props
                    .columns
                    .map(column => {
                        this.state.id= i + 1; 
                        return (
                            <td key={column.key}>

                                {this.props.data[i][column.key]}

                            </td>
                        )
                    })}

            </tr>
</Link>
            tableRows.push(row)
            }
        for (let i = 0; i <= Math.ceil(this.props.data.length / this.props.maxItems); i++) {
            this.MaxPages = i;

        }

        let tableBody = <tbody>{tableRows}</tbody>;
        return <table>{tableHeader}{tableBody}
        </table>;
    }

    render() {

        return (
            <div className="col-md-6">
                <div className="container-fluid">
                    <div
                        className="table table-bordered"
                        style={{
                        marginLeft: "70%",
                        marginRight: "5%"
                    }}>
                        {this.createTable()}
                        {this.PrevButton()}
                        {this.NextButton()}
                    </div>

                </div>
            </div>
        )
    }

}

导出默认类MyTable扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
当前页面：this.props.pgNo，
详情：[]，
id:null
}
这是MaxPages=0；
}
PrevButton（）{
if（this.state.currentPage==0）{
返回（空）；
}否则{
返回(
{this.setState（{currentPage:this.state.currentPage-1}}}>
上一页
);
}
}
下一个按钮（）{
if（this.state.currentPage===this.MaxPages-1）{
返回（空）；
}否则{
返回(
{
这是我的国家({
currentPage:this.state.currentPage+1
})
}}>
下一页
);
}
}
createTable=（）=>{
让tableHeader=
{this.props.columns.map（column=>{
回来
{column.name}
})}
;
this.state.number=this.state.number+1；
设tableRows=[]；
对于（设i=this.state.currentPage*this.props.maxItems；（i<（this.state.currentPage+1）*this.props.maxItems）和&（i）{
this.state.id=i+1；
返回(
{this.props.data[i][column.key]}
)
})}
tableRows.push（行）
}
对于（让i=0；i首先，为了使链接
正常工作，它需要接收路由器道具，但由于它呈现为路由，因此它不接收任何道具
其次所有路由都定义为到侧的子路由
，但它们从不在侧
组件中呈现
您可以像这样编写组件
App.js
class App extends Component {
  render () {
    return (
        <div>
            <BrowserRouter>
              <div>
                <Route component={Side}>
                <Switch>
                    <Route exact path="/" component={Home}/>
                    <Route path="/user-lists" component={Table}>
                    <Route path="*" component={NotFound}/>
                </Switch>
              </div>
            </BrowserRouter>
        </div>
    )
  }
}


export default App

export const Side = (props) => (

    <aside className="main-sidebar sidebar-dark-primary elevation-4">

        <a href="#" className="brand-link">
            <span className="brand-text font-weight-light">Dashboard</span>
        </a>

        <div className="sidebar">

            <div className="user-panel mt-3 pb-3 mb-3 d-flex">
                <div className="image"></div>
                <div className="info">
                    <a href="#" className="d-block">Irtaza</a>
                </div>
            </div>

            <nav className="mt-2">
            <li><Link  to='/'>Home</Link></li>&nbsp;
            <li><Link  to='/posts'><Fausers /> Posts  </Link></li>&nbsp;
            <li><Link  to='/user-lists'><Fafile/> Users </Link></li>&nbsp;
            <li><Link  to='*'><Fatimes/> Whoops 404 </Link></li>

         </nav>

        </div>

    </aside>

)

类应用程序扩展组件{
渲染（）{
返回(
)
}
}
导出默认应用程序

和Side.js
class App extends Component {
  render () {
    return (
        <div>
            <BrowserRouter>
              <div>
                <Route component={Side}>
                <Switch>
                    <Route exact path="/" component={Home}/>
                    <Route path="/user-lists" component={Table}>
                    <Route path="*" component={NotFound}/>
                </Switch>
              </div>
            </BrowserRouter>
        </div>
    )
  }
}


export default App

export const Side = (props) => (

    <aside className="main-sidebar sidebar-dark-primary elevation-4">

        <a href="#" className="brand-link">
            <span className="brand-text font-weight-light">Dashboard</span>
        </a>

        <div className="sidebar">

            <div className="user-panel mt-3 pb-3 mb-3 d-flex">
                <div className="image"></div>
                <div className="info">
                    <a href="#" className="d-block">Irtaza</a>
                </div>
            </div>

            <nav className="mt-2">
            <li><Link  to='/'>Home</Link></li>&nbsp;
            <li><Link  to='/posts'><Fausers /> Posts  </Link></li>&nbsp;
            <li><Link  to='/user-lists'><Fafile/> Users </Link></li>&nbsp;
            <li><Link  to='*'><Fatimes/> Whoops 404 </Link></li>

         </nav>

        </div>

    </aside>

)

export const-Side=（道具）=>(
主页
帖子
用户
哎呀，404
)
请尝试为您的问题创建一个示例。编辑了我的代码。我知道问题出在我的App.js或Sidebar中。jsI无法创建一个最小、完整且可验证的ITI示例。现在显示“a可能只有一个子元素”
export const Side = (props) => (

    <aside className="main-sidebar sidebar-dark-primary elevation-4">

        <a href="#" className="brand-link">
            <span className="brand-text font-weight-light">Dashboard</span>
        </a>

        <div className="sidebar">

            <div className="user-panel mt-3 pb-3 mb-3 d-flex">
                <div className="image"></div>
                <div className="info">
                    <a href="#" className="d-block">Irtaza</a>
                </div>
            </div>

            <nav className="mt-2">
            <li><Link  to='/'>Home</Link></li>&nbsp;
            <li><Link  to='/posts'><Fausers /> Posts  </Link></li>&nbsp;
            <li><Link  to='/user-lists'><Fafile/> Users </Link></li>&nbsp;
            <li><Link  to='*'><Fatimes/> Whoops 404 </Link></li>

         </nav>

        </div>

    </aside>

)