reactjs Link not working,when render after ajax request - reactjs

Question

I want render a table from ajax request data. Each row with a action link to enter a edit page.when I click the link, the url on browser was changed,but it can't enter edit page.
In addition, when I click link button, the url on browser is not I except. (It's http://192.168.1.186:4444/table/basic-table2/articles rather than http://192.168.1.186:4444/#/table/basic-table2/articles).
I'm thinking the problem maybe cause by lifecycle of component mounting. Because when I put Link element out side the table(not wait ajax request return), it work well.
I'm new in React, Can anyone finger out where I am wrong？following is the code:
renderOperator = (value, index, record) => {
const edit = <Link exact="true" to="/table/basic-table2/articles">编辑</Link>;
const context = {};
return (
<div>
<Router context={context}>
<span>
{edit}
</span>
</Router>
<a
style={styles.removeBtn}
onClick={this.deleteItem.bind(this, record)}
>
删除
</a>
</div>
);
};
fllowing is the table:
<Table
dataSource={this.state.dataSource}
isLoading={this.state.isLoading}
rowSelection={{
...this.rowSelection,
selectedRowKeys: this.state.selectedRowKeys,
}}
>
<Table.Column title="编码" dataIndex="article_id" width={120} />
<Table.Column title="名称" dataIndex="article_title" width={250} />
<Table.Column title="报名数" dataIndex="enrolled_num" width={160} />
<Table.Column title="访问人数" dataIndex="visited_user_num" width={160} />
<Table.Column title="访问次数" dataIndex="visited_num" width={120} />
<Table.Column title="转载数" dataIndex="reprinted_num" width={120} />
<Table.Column
title="操作"
cell={this.renderOperator}
lock="right"
width={120}
/>
</Table>

Answer 1

I think the issue may be that you're including an instance of <Router /> inside if the <Table.Column />. You shouldn't need to create a separate instance for every <Link />
Try removing the <Router /> inside of renderOperator

Answer 2

It took me a while to understand your question.
Firstly, please check if there is any console errors in your browser. If yes, it may block your UI router to view the page.
Secondly, if you are using react-router, here is a link to the hash router usage: https://reacttraining.com/react-router/web/api/HashRouter. Basically, you need to wrap the routes with <HashRouter>.
Lastly, a few tips to improve your code, not related to your question:
You can use <React.Fragment> to replace your <div> wrapper
You can use items.map() to iterate through the list of Table.Column.